Mehrere und / oder verschachtelte Bootstrap-Container?

82

Nach meinem Verständnis müssen alle Elemente im Bootstrap-Stil in einem <div class="container">Element vorhanden sein. Aber manchmal sehe ich Bootstrap-Beispiele, in denen es mehrere "Container" gibt:

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

...

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

Meine Fragen:

  1. Wann würden Sie jemals eine einzelne HTML-Seite mit mehreren "Container-Divs" benötigen? Welchen Vorteil bietet dies, anstatt nur den gesamten Körper in einen großen "Container Div" zu stecken?
  2. Möchten Sie jemals "Container Divs" in anderen verschachteln? Wann warum?
css twitter-bootstrap smeeb
quelle
1
Wenn Sie ein Karussell in voller Breite verwenden, werden Container für die Beschriftungen verwendet, sodass es sich nicht in einem Container befinden sollte. Aus diesem Grund könnten Sie einen Container darüber und einen Container darunter haben.
Aibrean
1
Während @Christina insofern richtig ist, als die Dokumente sagen, dass Sie keine Container verschachteln, wird es manchmal verwendet und ist nützlich. Weitere Informationen zum Verschachteln finden Sie unter stackoverflow.com/questions/29660034/… .
Gidmanma

Antworten:

80

  1. Einige Abschnitte der Seite erstrecken sich über die gesamte Breite des Ansichtsfensters, andere nicht. Einige Hintergründe haben die volle Breite, der Inhalt jedoch nicht.

    Ein Beispiel hierfür ist ein Featurette-Bereich mit einem Hintergrundbild oder einer Hintergrundfarbe, die die gesamte Breite des Ansichtsfensters aufweist, deren Inhalt, Formulare oder was auch immer, die Breite eines bestimmten Ansichtsfensters jedoch nicht überschreitet .container.

  2. Sie verschachteln nicht .containeroder .container-fluid- sehen Sie die Dokumente . Es ist nicht nötig.

    Dokumente: Bootstrap benötigt ein enthaltenes Element, um den Inhalt der Site zu verpacken und unser Grid-System unterzubringen. Sie können einen von zwei Containern auswählen, die in Ihren Projekten verwendet werden sollen. Beachten Sie, dass aufgrund von Polsterung und mehr keiner der Container verschachtelt werden kann [beides bedeutet nicht, dass .container und .container-fluid NICHT verschachtelt werden dürfen].

Christina
quelle
4
Ich habe oft eine .container-fluidfür so etwas wie die Navigationsleiste oder ein Banner, während sich die Hauptseite in einer befindet .container.
DavidG
3
@ DavidG Ja, und dann haben Sie doppelte Polsterung. Dokumente: Bootstrap benötigt ein enthaltenes Element, um den Inhalt der Site zu verpacken und unser Grid-System unterzubringen. Sie können einen von zwei Containern auswählen, die in Ihren Projekten verwendet werden sollen. Beachten Sie, dass aufgrund von Polsterung und mehr kein Container verschachtelt werden kann. getbootstrap.com/css
Christina
1
@ DavidG. Ich verwende keine .container-Flüssigkeit, es sei denn, das unmittelbare Kind ist eine .row und die Spalten.
Christina
1
Ich auch nicht. Ich meinte, ich hätte einen Flüssigkeitsbehälter mit der Navigationsleiste, damit er von den Rändern des Bildschirms abblutet. Starten Sie dann nach dem Tag zum Schließen des Behälters einen neuen nicht flüssigen Behälter mit dem Hauptinhalt.
DavidG
1
Hier ist eine große Unterscheidung zu treffen - vielleicht sollten sie nicht direkt verschachtelt sein , aber sie können verschachtelt werden und müssen in einigen Fällen verschachtelt werden . Angenommen, ich habe ein gepolstertes Panel-Div im Hauptcontainer, das keine Zeile oder Spalte ist. In diesem Fall benötige ich eine .container-fluidKlasse, die meine Zeilen / Spalten im Panel umgibt. Andernfalls würde ich eine horizontale Bildlaufleiste erhalten (es sei denn, der Überlauf im Bedienfeld ist ausgeblendet - aber ich möchte das möglicherweise nicht. Vielleicht möchte ich eine Bildlaufleiste, wenn viele Daten darin enthalten sind, möglicherweise eine breite Tabelle).
23.
17

Im Gegensatz zu dem, was einige gesagt haben, können Sie ein container-fluidin a verschachteln container. Es gibt sogar ein Beispiel auf der offiziellen Bootstrap-Website:

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

Stück für Stück
quelle
1
Falls sich der Inhalt dieses Links ändert, handelt es sich um Version 3.3, in der das Beispiel eine containerVerschachtelung enthält container-fluid: view-source: getbootstrap.com/docs/3.3/examples/navbar
Ryan
6

Im Abschnitt Layout der 4.3-Dokumente unter https://getbootstrap.com/docs/4.3/layout/overview/#containers wird jetzt angegeben

Während Behälter können verschachtelt werden, die meisten Layouts keine verschachtelten Container benötigen.

Seien Sie sich nur bewusst, was andere über Polsterung usw. gesagt haben.

Patrick McDonald
quelle
5

Eigentlich hängt es ganz von den Anforderungen des Designers ab.

Manchmal benötigen Sie die volle Breite der Zeile (ich meine das Ansichtsfenster oder einen Streifen des sichtbaren Teils, den Sie ohne separate Containerklasse erreichen können).

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

siehe obiges Vorlagenbeispiel zum Verständnis

Prüfung
quelle
0

Sparen Sie Zeit und wechseln Sie zum nativen CSS -Raster zum CSS-Raster.

Bootstrap-Container haben eine Einschränkung, wenn Sie nach einer 12-Spalten-Einschränkung und einer 10-Pixel-Padding-Herausforderung suchen. Das Hinzufügen ist nicht nativ (CSS-integriert), wenn der Benutzer sie auf seinen Computer herunterladen muss, und zusätzlich die Anzahl von Tauchgang, den Sie verarbeiten müssen.

In diesem Sinne versuchen Sie es und wechseln Sie zum CSS-Grid. Hier ist ein guter Spielplatz, um anzufangen.

Zu den Nachteilen von CSS-Grid gehört nun, dass es immer noch nicht mit IE kompatibel ist.

Feras
quelle