Verschachtelte Zeilen mit Bootstrap-Grid-System?

194

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

Abbildung 1 Beispiel

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?

— Greg
quelle

Bitte posten Sie das HTML / CSS, das Sie bisher ausprobiert haben.

— Steve Sanders

Versuchen Sie Folgendes : jsfiddle.net/KXje2/9 Ich habe meine Geige so bearbeitet, dass sie für große bis extra kleine Bildschirme geeignet ist.

— BuddhistBeast

Hat der obige Code für Sie funktioniert? ...

— BuddhistBeast

298

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 ):

Bildschirmfoto

— KyleMit
quelle

leider ein 1 Jahr alt Faden, kapern , aber wissen Sie , wie zwischen Bild erhalten 0px und 1 und 3

— alex

@alex, klar - einfach margin: 0;auf die setzen.mini-box Element setzen. In meinem Beispiel wurde aus Gründen der Übersichtlichkeit nur eine hinzugefügt, aber Sie können die Zeile ganz entfernen. Hier ist eine Demo

— KyleMit

Warum gibt es keine Zeile zwischen Spalte für Minibox 2 und Spalte für Minibox 3? und was wird passieren, wenn es gibt?

— Pashute

@pashute, siehe Bootstrap 3-Raster. Ist es wirklich wichtig, wie viele Spalten sich in einer Zeile befinden? . Jede Mini-Box nimmt 50% des verfügbaren Speicherplatzes ein (durch die Spalte eingeschränkt), sodass zwei die erste Zeile einnehmen. Alle zusätzlichen werden einfach in eine neue Zeile eingefügt. Du kannst sie auch in Reihen koppeln, müssen dies aber nicht. Bootstrap-Wraps werden standardmäßig verwendet, damit Sie Ihr Markup nicht mit neuen Zeilen überladen müssen. Wenn es semantisch bedeutungsvoll ist, würde ich sagen, machen Sie es. Wenn Sie jedoch nur eine Liste mit 4 Objekten anzeigen, behalten Sie diese in derselben Zeile bei.

— KyleMit

@ user3921890, das ist ein zu großes Thema, um es in einer Kommentarzeile zu beantworten. Können Sie einen neuen Thread veröffentlichen, in dem erklärt wird, was Sie versuchen, und mindestens einen Versuch, dies zu tun, und dann hier einen Link dazu erstellen?

— KyleMit

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

— ezzadeen
quelle