it-swarm.com.de

Wie kann ich eine Bootstrap Spalte erstellen, die sich über mehrere Zeilen erstreckt?

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

Ich bin 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.

enter image description here

Irgendwelche Ideen, wie Sie am besten damit umgehen können?

143
James Jeffery

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>

Für Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

Sehen Sie sich die Demo zu JSFiddle (Bootstrap 2) an: http://jsfiddle.net/SxcqH/52/

152
Mastergalen

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>
15
disrvptor

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

<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 glauben, es sei der falsche Gebrauch einer Zeile.

1
James Jeffery

Ich glaube, der Teil, der das Überspannen von Zeilen betrifft, wurde gründlich beantwortet (d. H. 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, ist die Verwendung der vordefinierten Klasse h-50 Für die row, die die Felder 2, 3, 4 enthält, eine viel einfachere Lösung. und 5.

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

1
Shareef Hadid