對其

使用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來實(shí)現(xiàn)的，但并不是每個實(shí)現(xiàn)方法都能做到這一點(diǎn)。

.col-6 .col-sm-3.col-6 .col-sm-3.col-6 .col-sm-3.col-6 .col-sm-3

您也可以使用我們的響應(yīng)式顯示工具在特定的斷點(diǎn)處應(yīng)用此間隔。

.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-類來控制內(nèi)容的顯示順序。這些類是響應(yīng)的，所以你可以通過斷點(diǎn)來設(shè)置順序(例如，.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

還有響應(yīng)式.order-first和.order-last類，分別通過應(yīng)用order: -1和order: 6來更改元素的順序。 這些類也可以根據(jù)需要與編號的.order- *類混合使用。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

偏移列

你可以用兩種方式來偏移網(wǎng)格列：我們的響應(yīng)式.offset-網(wǎng)格類和我們的邊距工具。網(wǎng)格類的大小與列的大小相匹配，而margins對于快速布局來說更有用，因?yàn)槠频膶挾仁强勺兊摹?/p>

偏移類

使用.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

響應(yīng)式偏移量：

.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這樣的邊距實(shí)用程序來強(qiáng)制兄弟列之間的距離。

.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

獨(dú)立列類

.col-*類也可以在.row之外使用，給元素一個特定的寬度。當(dāng)列類被用作行的非直接子類時，就會省略paddings。

.col-3: width of 25%

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

這些類可以與實(shí)用程序一起使用，來創(chuàng)建響應(yīng)的浮動圖片。如果文本較短，可以使用.clearfix包裝器包裝內(nèi)容以清除浮動。

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.

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。