對其

使用flexbox對齊工具來垂直和水平對齊列。

垂直對齊

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two 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-3.col-6 .col-sm-3.col-6 .col-sm-3

您也可以使用我們的響應式顯示工具在特定的斷點處應用此間隔。

.col-6 .col-sm-4.col-6 .col-sm-4.col-6 .col-sm-4.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-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-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.

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的bootstrap 一排5个_Bootstrap5 列（Columns）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。