it-swarm.com.de

Verschachtelte Zeilen mit dem Gittersystem bootstrap?

Ich möchte 1 größeres Bild mit 4 kleineren Bildern in einem 2x2-Format wie folgt:

Figure 1 Example

Mein erster Gedanke war, alles in einer Reihe unterzubringen. Erstellen Sie dann zwei Spalten und in der zweiten Spalte zwei Zeilen und zwei Spalten, um den 1x1- und 2x2-Effekt zu erzielen.

Dies scheint jedoch nicht möglich zu sein, oder mache ich es einfach nicht richtig?

178
Greg

Bootstrap Version 3.x

Lesen Sie wie immer die großartige Dokumentation von Bootstrap:

3.x Docs : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Stellen Sie sicher, dass sich die übergeordnete Ebene in einem .container -Element befindet. Wenn Sie Zeilen verschachteln möchten, öffnen Sie einfach einen neuen .row in Ihrer Spalte.

Hier ist ein einfaches Layout, mit dem Sie arbeiten können:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap Version 4.0

4.0 Docs : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Hier ist eine aktualisierte Version für 4.0, aber Sie sollten unbedingt den gesamten Dokumentationsabschnitt im Raster lesen, damit Sie verstehen, wie Sie diese leistungsstarke Funktion nutzen können

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Demo in Fiddle jsFiddle 3.x | jsFiddle 4.

Welches wie folgt aussehen wird ( mit ein wenig hinzugefügtem Styling ):

screenshot

277
KyleMit

Hinzufügen zu dem, was @KyleMit gesagt hat:

  • ziehen Sie in Betracht, die Klassen col-md-* für die größeren zu verwenden
  • äußere Spalten und col-xs-* Klassen für die kleineren
  • innere Spalten

Dies ist nützlich, wenn Sie die Seite in verschiedenen Bildschirmgrößen anzeigen. Auf einem kleinen Bildschirm verwenden Sie:

  • die Verpackung von größerem
  • äußere Spalten werden dann passieren, während die kleineren beibehalten werden
  • innere Spalten, wenn möglich
4
ezzadeen