Bootstrap: jak zmienić szerokość pojemnika?

128

Użyłem Twitter Bootstrap do stworzenia strony internetowej ze stałą klasą kontenera, ale teraz klient chce, aby strona miała szerokość 1000 pikseli, a nie 1170 pikseli. Nie używam plików .less.

Czy można to szybko naprawić?

twitter-bootstrap Alex
źródło
Zapoznaj się z odpowiedzią tutaj , myślę, że twój problem zostanie rozwiązany przez naprawione skrzypce w tej odpowiedzi.
prem
@prem, tx, ale nie rozumiem przykładu, ponieważ nie używa on żadnej z klas ładowania początkowego, takich jak span czy container. Myślę, że wszystko, czego potrzebuję w tym projekcie, to ustawić maksymalny rozmiar kontenera na 940px z responsywnym bootstrapem.
alex

Odpowiedzi:

76

Przejdź do sekcji Dostosuj w witrynie Bootstrap i wybierz preferowany rozmiar. Będziesz musiał ustawić @gridColumnWidthi @gridGutterWidthzmienne.

Na przykład: @gridColumnWidth = 65pxi @gridGutterWidth = 20pxwyniki w 1000pxukładzie.

Następnie pobierz.

albertedevigo
źródło
nie można osiągnąć dokładnego kontenera 1000px, zmieniając zmienne gridColumnWidth i gridGutterWidth ... ponieważ (12 * (gridColumnWidth) + 12 (gridGutterWidth)) nie równa się 1000. I tak tylko ja dałem to rozwiązanie. Czy to jest poprawne?
prem
15
Teoretycznie istnieje nieskończona liczba kombinacji, które pasują do 1000 pikseli. Przykład: 12 * 65 + 11 * 20 = 1000 (między kolumnami jest tylko 11 rynien).
albertedevigo
hę! naprawdę nie rozpoznałem prostej rzeczy ... w każdym razie twoje było trafnym rozwiązaniem.
prem
Dziękuję za post, był pomocny;) Uwaga: praktycznie byłoby dokładnie 7 rozwiązań wykorzystujących pełne piksele dla szerokości 1000px. (szerokości kolumn 10, 21, 32, 43, 54, 65 i 76)
dfherr
@dfherr Nie wiem, co dokładnie masz na myśli, mówiąc „praktycznie”, ale pamiętaj, że CSS obsługuje wartości dziesiętne pikseli. Dlatego istnieje nieskończona liczba rozwiązań. w3.org/TR/CSS21/syndata.html#length-units
albertedevigo
234

Oto rozwiązanie:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

Zaletą tego rozwiązania w porównaniu z dostosowywaniem Bootstrap, jak w odpowiedzi @ Bastardo , jest to, że nie zmienia to pliku Bootstrap. Na przykład, jeśli używasz CDN, nadal możesz pobrać większość Bootstrap z CDN.

mcbjam
źródło
10
Większość odpowiedzi pomija CDN. Twoja odpowiedź to idealne rozwiązanie.
Charles Watson
2
Jest idealny dla osób korzystających z CDN. Modyfikacja LESS (gdy pojawia się 4, SASS) w czasie kompilacji jest idealna dla osób hostujących własny Bootstrap CSS. Jednak modyfikacja niestandardowego LESS (lub SASS) zaimportowanego po dostarczonym oznacza, że ​​możesz zaktualizować bazowy LESS bez (zwykle) robienia różnic.
Greg Pettit
2
Wiem, że to naprawdę późno, ale dane kontenery są teraz większe, jeśli dodasz width: auto do powyższego kodu, możesz zrobić kontenery większe niż ich max. 1170.
Rick Calder
To jest to, czego szukałem. Dziękuję Ci.
tedebus
20

Wiążesz jeden, który miał za plecami, mówiąc, że nie będziesz używać plików LESS. Swój pierwszy motyw Twitter Bootstrap zbudowałem w wersji 2.0 i wszystko zrobiłem w CSS - tworząc plik override.css. Poprawne działanie rzeczy zajęło kilka dni.

Teraz mamy 3.0. Zapewniam cię, że nauka MNIEJ zajmuje mniej czasu, co jest całkiem proste, jeśli czujesz się komfortowo z CSS, niż robienie wszystkich tych szalonych przesłonięć CSS. Wprowadzanie zmian, takich jak ta, którą chcesz, to bułka z masłem.

W Bootstrap 3.0 klasa kontenera kontroluje szerokość, a wszystkie zawarte w niej style dostosowują się do wypełnienia kontenera. Zmienne szerokości kontenera znajdują się na dole pliku variable.less.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

Niektóre witryny albo nie mają wystarczającej ilości treści, aby wypełnić wyświetlacz 1020, albo chcesz mieć węższą ramkę ze względów estetycznych. Ponieważ BS używa siatki 12-kolumnowej, używam wielokrotności, takiej jak 960.

Bastardo Sucio
źródło
4
Działa, ale: nazwy są zmienne @container-sm, @container-mda @container-lg(teraz)
Andreas Dolk
1
@Bastardo ładne imię +1
Ömer An
18

@mcbjam już udzielił tej odpowiedzi, ale tutaj jest trochę więcej wyjaśnień.

Możesz łatwo wprowadzić zmianę za pomocą zapytania o media w pliku CSS bez pobierania BS. Właśnie to zrobiłem i działa pięknie.

Wartość „min-width” w zapytaniu o media informuje CSS, aby zmienił szerokość kontenera na 1000 pikseli tylko na ekranach większych niż 1200 pikseli (lub o dowolnej szerokości, którą zdecydujesz się tam uwzględnić). Zachowuje to responsywność witryny, więc gdy rozmiar ekranu spadnie poniżej tej wartości (mniejszy monitor, tablet, smartfon itp.), Twoja witryna nadal będzie dostosowywać się do mniejszych ekranów.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}
Jeff Schwarting
źródło
13

Dla bootstrap 4, jeśli używasz Sass, tutaj jest zmienna do edycji

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Aby nadpisać tę zmienną, zadeklarowałem $ container-max-widths bez! Default w moim pliku .sass przed zaimportowaniem bootstrapa.

Uwaga: potrzebowałem tylko zmienić wartość xl, więc nie przejmowałem się myśleniem o punktach przerwania.

Kaizoku Gambare
źródło
12

Ustaw własną klasę kontenera treści z właściwością szerokości 1000px, a następnie użyj klasy boostrap container-fluid zamiast container.

Działa, ale może nie być najlepszym rozwiązaniem.

Geo
źródło
6

Użyj selektora opakowania i utwórz kontener, który ma 100% szerokości wewnątrz tego opakowania, aby hermetyzować całą stronę.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Teraz maksymalna szerokość jest ustawiona na 1000 pikseli i nie potrzebujesz mniej lub sass.

Larry Judd
źródło
0

Rozmiary pojemników

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

w sekcji Rozmiary pojemników zmienić 1140na970

Mam nadzieję, że ci pomoże.

dziękuję za poprawne. łącze do dostosowania bootstrap: https://getbootstrap.com/docs/3.4/customize/

Więc Santo
źródło
-3

Dodaj ten fragment CSS do swojego stylu css. Lepiej jest to dodać po dodaniu pliku bootstrap css, aby go nadpisać. 

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`
Mahendra
źródło