Wie erstelle ich, dass eine Bootstrap-Spalte zwei Zeilen umfasst?

Bootstrap Multi-Line Crossbar

Sie möchten mit Bootstrap ein Rasterlayout wie dieses erstellen:

[Bild: Dargestellt ist ein Rasterlayout, in dem die erste Spalte (beschriftet 1) Über zwei Zeilen]

Die Schwierigkeit, die Sie haben, besteht darin, das erste Feld (mit der Bezeichnung 1) zu erstellen, das sich über zwei Zeilen erstreckt.

Lösung

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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich, dass eine Bootstrap-Spalte zwei Zeilen umfasst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!