如何在 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中文网其他相关文章！