如何在 Bootstrap 中创建 5 列布局？

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