Wiele i / lub zagnieżdżonych kontenerów Bootstrap?

84

Moje zrozumienie jest, że wszystkie elementy Bootstrap stylu musi istnieć wewnątrz <div class="container">elementu. Ale czasami widzę przykłady Bootstrap, w których istnieje wiele „kontenerów”:

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

Moje pytania:

  1. Kiedy potrzebujesz pojedynczej strony HTML z wieloma „kontenerami div”? Jakie korzyści daje to w przeciwieństwie do umieszczania całego ciała w jednym dużym „module div”?
  2. Czy kiedykolwiek chciałbyś zagnieździć „elementy div kontenera” w innych? Kiedy, dlaczego?
css twitter-bootstrap smeeb
źródło
1
Jeśli używasz karuzeli o pełnej szerokości, zawiera ona kontenery używane na podpisy, więc nie powinna znajdować się w kontenerze. Z tego powodu możesz mieć pojemnik nad nim i pojemnik pod nim.
Aibrean
1
Chociaż @Christina ma rację, ponieważ dokumenty mówią, że nie zagnieżdżasz pojemników, czasami jest to używane i przydatne. Więcej informacji na temat zagnieżdżania można znaleźć na stackoverflow.com/questions/29660034/… .
gidmanma

Odpowiedzi:

80

  1. Niektóre sekcje strony będą obejmowały całą szerokość widocznego obszaru, a inne nie. Niektóre tła będą miały pełną szerokość, ale treść nie.

    Przykładem tego jest obszar fabularny, który ma obraz tła lub kolor odpowiadający pełnej szerokości widocznego obszaru, ale zawartość wewnątrz tego obszaru, formularze lub cokolwiek innego, nie przekracza .containerprzy żadnej podanej szerokości widoku.

  2. Nie gniazdujesz .containerani .container-fluid- patrz dokumentacja . To nie jest konieczne.

    Dokumenty: Bootstrap wymaga elementu zawierającego, aby opakować zawartość witryny i pomieścić nasz system grid. Możesz wybrać jeden z dwóch kontenerów do wykorzystania w swoich projektach. Zauważ, że ze względu na wypełnienie i więcej, żaden kontener nie jest zagnieżdżony [nie oznacza to, że .container i .container-fluid NIE mogą być zagnieżdżane].

Christina
źródło
4
Często mam .container-fluidcoś takiego jak pasek nawigacyjny lub jakiś baner, podczas gdy strona główna znajduje się wewnątrz pliku .container.
DavidG
3
@DavidG Tak, a więc masz podwójne wypełnienie. Dokumenty: Bootstrap wymaga elementu zawierającego, aby opakować zawartość witryny i pomieścić nasz system grid. Możesz wybrać jeden z dwóch kontenerów do wykorzystania w swoich projektach. Zwróć uwagę, że ze względu na wypełnienie i inne elementy żaden pojemnik nie jest gniazdowalny. getbootstrap.com/css
Christina,
1
@DavidG. Nie używam .container-fluid, chyba że bezpośrednim dzieckiem jest .row i kolumny.
Christina
1
Ja też nie. Chodziło mi o to, że będę miał pojemnik z płynem z paskiem nawigacyjnym, aby spływał z krawędzi ekranu, a następnie po zamknięciu tagu pojemnika, uruchom nowy pojemnik niepłynny z główną zawartością.
DavidG
1
Należy tu wprowadzić duże rozróżnienie - może nie powinny być bezpośrednio zagnieżdżane , ale mogą być zagnieżdżane, aw niektórych przypadkach muszą być zagnieżdżone . Powiedzmy, że mam wyściełany panel div wewnątrz głównego kontenera, który nie jest wierszem ani kolumną - w takim przypadku potrzebuję .container-fluidklasy otaczającej moje wiersze / kolumny wewnątrz panelu; w przeciwnym razie uzyskałbym poziomy pasek przewijania (chyba że przepełnienie wewnątrz panelu jest ustawione na ukryte - ale może nie chcę tego, może chcę paska przewijania, jeśli w środku jest dużo danych, może szeroka tabela).
jbyrd
17

W przeciwieństwie do tego, co powiedzieli niektórzy, możesz zagnieździć container-fluidwewnątrz container. Na oficjalnej stronie bootstrap jest nawet przykład:

http://getbootstrap.com/examples/navbar/

Kawałek po kawałku
źródło
1
W przypadku, gdy zawartość tego linku ostatecznie się zmieni, jest to wersja 3.3, w której przykład zawiera containerzagnieżdżenie a container-fluid: view-source: getbootstrap.com/docs/3.3/examples/navbar
Ryan
5

Właściwie to całkowicie zależy od wymagań projektanta.

Czasami potrzebujesz pełnej szerokości wiersza (mam na myśli rzutnię lub pasek widocznej części, który można uzyskać bez oddzielnej klasy kontenera)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

zobacz powyższy przykład szablonu, aby zrozumieć

test
źródło
0

Oszczędzaj czas i przełącz się na siatkę CSS, natywną siatkę CSS.

Kontenery bootstrap mają ograniczenia, jeśli szukasz ograniczenia 12 kolumn, wyzwania wypełnienia 10 pikseli, dodawanie do tego nie jest natywne (wbudowane CSS), gdzie użytkownik musi pobrać go na swój komputer, a do tego liczba nurkowania, które musisz przetworzyć.

Mając to wszystko na uwadze, spróbuj i przełącz się na siatkę CSS , co jest dobrym miejscem do rozpoczęcia.

Teraz dochodząc do wad siatki CSS, jest to, że nadal nie jest kompatybilny z IE.

Feras
źródło