首页 > 文章 > web前端 > 如何在 Bootstrap 中创建 5 列布局？

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

Patricia Arquette原创: 2024-10-27 10:05:31278浏览

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

bootstrap for auto break using class column

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Perfectly Center an Image in Bootstrap Using .center-block?下一篇：How can you create beveled corners for block divs in CSS without using border-corner-shape?

查看更多