如何在 Bootstrap 中建立 5 列佈局？-css教學-PHP中文網

如何在 Bootstrap 中建立 5 列佈局？

Patricia Arquette

發布： 2024-10-27 10:05:31

原創

378 人瀏覽過

How can I create a 5-column layout in Bootstrap?

Bootstrap - 建立5 個欄位佈局

在Bootstrap 中，可以使用下列方法建立具有5 個全角列的佈局：

選項1：自動佈局網格（Bootstrap 4）

對於Bootstrap 4，利用自動佈局網格建立五個等寬、全寬的欄位：

<code class="html"><div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div></code>

登入後複製

選項2：Clearfix 中斷(Bootstrap 4)

要將列換行在同一行中，請在每五列後插入一個clearfix 中斷：

<code class="html"><div class="container">
    <div class="row">
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col-12"></div> <!-- Clearfix break -->
        <div class="col">X</div>
    </div>
</div></code>

登入後複製

選項3：row-cols-5類(Bootstrap 4.4 )

對於Bootstrap 4.4 及更高版本，請在行元素上使用row-cols-5 類別：

<code class="html"><div class="container">
    <div class="row row-cols-5">
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
        <div class="col">X</div>
    </div>
</div></code>

登入後複製

以上是如何在 Bootstrap 中建立 5 列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！