Verschachtelte Zeilen mit Bootstrap-Grid-System?

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

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 ich mache es einfach nicht richtig?

Bootstrap Version 3.x.

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

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

Stellen Sie sicher, dass sich die übergeordnete Zeile innerhalb eines .containerElements befindet. Wann immer Sie Zeilen verschachteln möchten, öffnen Sie einfach ein neues .rowinnerhalb 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-Dokumente : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Hier ist eine aktualisierte Version für 4.0, aber Sie sollten unbedingt den gesamten Abschnitt mit den Dokumenten 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.0

Welches wird so aussehen ( mit ein bisschen zusätzlichem Styling ):

Erwägen Sie zusätzlich zu den Aussagen von @KyleMit Folgendes:

• col-md-* Klassen für die größeren äußeren Spalten
• col-xs-* Klassen für die kleineren inneren Spalten

Dies ist nützlich, wenn Sie die Seite auf verschiedenen Bildschirmgrößen anzeigen.

Auf einem kleinen Bildschirm erfolgt dann das Umschließen größerer äußerer Spalten, wobei die kleineren inneren Spalten nach Möglichkeit beibehalten werden