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

Bootstrap - 5 列佈局

您想使用Bootstrap 實現5 列全寬佈局，但尚未找到解決方案適合您的需求。

Bootstrap 4 提供了一個使用自動佈局網格的簡單解決方案。若要建立 5 個相等的全寬列，請使用下列程式碼：

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

此解有效，因為 Bootstrap 4 使用 Flexbox。若要將列包裝在同一行中，請使用clearfix 中斷，例如

或

每 5 列。

對於 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 4 中建立 5 列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！