Wie kann ich eine Bootstrap-Spalte dazu bringen, mehrere Zeilen zu überspannen?

158

Ich versuche herauszufinden, wie das folgende Raster mit Bootstrap erstellt wird.

Ich bin mir nicht sicher, wie ich die Box (Nummer 1) erstellen würde, die zwei Zeilen umfasst. Die Boxen werden programmgesteuert in der Reihenfolge generiert, in der sie angeordnet sind. Box 1 ist eine Willkommensnachricht.

Geben Sie hier die Bildbeschreibung ein

Irgendwelche Ideen, wie man das am besten macht?

css twitter-bootstrap James Jeffery
quelle
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , Sie können das Bootstrap-Gridsystem verschachteln.
TheHippo
1
Erstellen Sie also 2 statt 3 Zeilen und verschachteln Sie die 2 Zeilen in der ersten Zeile? Dies kann problematisch sein, wenn die Boxen programmgesteuert generiert werden.
James Jeffery
1
Keine Ahnung, ob es funktionieren würde, aber würde das Hinzufügen der pull-leftKlasse zu allen Boxen funktionieren? Box 1 hat nicht die gleiche Höhe wie 2 + 4, aber es sollte funktionieren, wenn Sie die Höhe einstellen.
Hagelholz
Hailwood, geben Sie das als Antwort, wenn Sie können, wenn nicht, füge ich meinen Code ein. Es hat funktioniert ... zumindest auf Chrome. Müssen Sie es in anderen Browsern testen.
James Jeffery
@ Hagelholz tatsächlich, es ist kein Zug nach links erforderlich. Das Festlegen einer Höhe für das erste Element funktioniert.
James Jeffery

Antworten:

164

Für Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Erweitern Sie das Snippet

Für Bootstrap 2:

Code-Snippet anzeigen

Siehe die Demo zu JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

Mastergalen
quelle
Wie würden Sie die Felder vier und fünf dazu bringen, die Höhe der Reihe zu füllen, wenn Feld eins wächst?
Imran NZ
2
stackoverflow.com/questions/19695784/…
Mastergalen
Dieses Beispiel funktioniert nicht ganz, die Unterkante der ersten Spalte ist leicht falsch zum Rest ausgerichtet.
JackKalish
Dies ist eine großartige Antwort, aber was ist, wenn Box 5 auch dynamisch in Zeile 3 erweitert werden muss?
Mischa'el
@ Misha'el Das ist ziemlich einfach, mach einfach das, was er für Box 1 getan hat und wende es auf Box 3/5 an. Es sollten 3 Spalten gleicher Größe vorhanden sein, die eine außen würde nur 1 Zeile enthalten, die eine innen zwei Zeilen.
Nathan Williams
17

Wie aus den Kommentaren hervorgeht, besteht die Lösung darin, verschachtelte Bereiche / Zeilen zu verwenden.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
disrvptor
quelle
1

Das folgende Beispiel schien zu funktionieren. Stellen Sie einfach eine Höhe für das erste Element ein

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Ich kann nicht anders, als zu denken, dass es die falsche Verwendung einer Zeile ist.

James Jeffery
quelle
1

Ich glaube, der Teil zum Spannen von Zeilen wurde gründlich beantwortet (dh durch Verschachteln von Zeilen), aber ich bin auch auf das Problem gestoßen, dass meine verschachtelten Zeilen ihren Container nicht füllen. Während Flexbox und negative Ränder eine Option sind, besteht eine viel einfachere Lösung darin, die vordefinierte h-50Klasse für die rowenthaltenen Boxen 2, 3, 4 und 5 zu verwenden.

Hinweis: Ich verwende Bootstrap-4, ich wollte nur teilen, weil ich auf das gleiche Problem gestoßen bin und dies als elegantere Lösung empfunden habe :)

Shareef Hadid
quelle
0 
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
Ps Naidu
quelle