bootstrap 一排5个_Bootstrap5 列（Columns）

最新推荐文章于 2025-01-02 06:08:11 发布

weixin_39560029

最新推荐文章于 2025-01-02 06:08:11 发布

阅读量979

点赞数

文章标签： bootstrap 一排5个

本文链接：https://blog.csdn.net/weixin_39560029/article/details/111540463

版权

本文详细介绍了Bootstrap5中的列布局，包括一排5个列的实现，列的垂直和水平对齐，列包装，列间隔，排列控制，偏移列以及独立列的使用方法。内容涵盖.order-类的响应式显示，使用.mr-auto等边距工具调整列间距，并展示了在不同断点下的布局应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对其

使用flexbox对齐工具来垂直和水平对齐列。

垂直对齐

One of three columns

One of two columns

列包装(Column wrapping)

如果在一行中放置了超过12个列，每组额外的列将作为一个单位，放入新的一行。

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

列间隔

在flexbox中，将列间隔到新的行上需要一个小技巧：在你想将列打散到新的行上的地方添加一个 width: 100%的元素。通常情况下，这是通过多个.rows来实现的，但并不是每个实现方法都能做到这一点。

.col-6 .col-sm-3

您也可以使用我们的响应式显示工具在特定的断点处应用此间隔。

.col-6 .col-sm-4

重新排列

排列类

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers.

使用.order-类来控制内容的显示顺序。这些类是响应的，所以你可以通过断点来设置顺序(例如，.order-1.order-md-2)。

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

还有响应式.order-first和.order-last类，分别通过应用order: -1和order: 6来更改元素的顺序。这些类也可以根据需要与编号的.order- *类混合使用。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

偏移列

你可以用两种方式来偏移网格列：我们的响应式.offset-网格类和我们的边距工具。网格类的大小与列的大小相匹配，而margins对于快速布局来说更有用，因为偏移的宽度是可变的。

偏移类

使用.offset-md-*类将列向右移动。这些类将一列的左边距增加*列。例如，.offset-md-4将.col-md-4移动到四列上。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

响应式偏移量：

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

边距工具类

随着在v4中移至flexbox，你可以使用像.mr-auto这样的边距实用程序来强制兄弟列之间的距离。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

独立列类

.col-*类也可以在.row之外使用，给元素一个特定的宽度。当列类被用作行的非直接子类时，就会省略paddings。

.col-3: width of 25%

.col-sm-9: width of 75% above sm breakpoint

这些类可以与实用程序一起使用，来创建响应的浮动图片。如果文本较短，可以使用.clearfix包装器包装内容以清除浮动。

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus.