首頁 >web前端 >css教學 >如何建立跨多行的引導列?

如何建立跨多行的引導列?

Susan Sarandon
Susan Sarandon原創
2024-12-14 15:10:12635瀏覽

How to Create a Bootstrap Column Spanning Multiple Rows?

建立跨多行的Bootstrap 欄位

您的目標是建立具有特定佈局的Bootstrap 佈局:

如何建立跨多行的引導列?
<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>
挑戰在於創建跨越兩行的框 1。 對於 Bootstrap 3:要在 Bootstrap 3 中實現此目的,請利用以下 HTML 結構:

以上是如何建立跨多行的引導列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn