列布局（Columns）
借助我们的弹性盒子网格系统，了解如何使用一些用于对齐、排序和偏移的选项来修改列。另外，请参阅如何使用列类来管理非网格元素的宽度。
工作原理
-
列构建在网格的弹性盒子体系结构上。 弹性盒子意味着我们可以在行级别更改单个列和修改列组。您可以选择列的增长、收缩或其他更改方式。
-
在构建网格布局时，所有内容都列在列中。 Bootstrap程序网格的层次结构从容器到行到列再到内容。在极少数情况下，您可能会将内容和专栏结合起来，但要注意，可能会产生意想不到的后果。
-
Bootstrap包括预定义的类，用于创建快速、响应的布局。 每个网格层有六个断点和十几列，我们已经为您构建了几十个类来创建所需的布局。如果您愿意，可以通过Sass禁用此功能。
对齐
使用flexbox对齐实用程序垂直和水平对齐列。
垂直对齐
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>水平对齐
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>列换行
如果一行中放置的列数超过12列，则每组额外列将作为一个单元换行。
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>列拆分
在flexbox中将列拆分为新行需要一个小技巧：添加一个宽度为100%的元素，无论您想在哪里将列换到新行。通常这是通过多个.row来完成的，但不是每个实现方法都能解释这一点。
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>您也可以使用我们的响应显示实用程序在特定断点处应用此中断。
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>重新排序
排序类
使用.order-类控制内容的视觉顺序。这些类是响应的，因此您可以按断点设置顺序（例如，.order-1.order-md-2）。包括对所有六个网格层的1到5的支持。
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
还有响应的.order-first和.order-last类，它们分别通过应用order: -1和order: 6来更改元素的顺序。这些类也可以根据需要与编号的.order-*类混合使用。
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>列偏移
您可以通过两种方式偏移网格列：我们的响应式.offset-类和margin实用程序。网格类的大小与列匹配，而边距对于偏移宽度可变的快速布局更有用。
偏移类
使用.offset-md-*类向右移动列。这些类将列的左边距增加*列。例如，.offset-md-4在四列上移动.col-md-4。
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>除了在响应断点处清除列之外，还可能需要重置偏移量。在网格示例中可以看到这一点。
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>外边距实用类
通过在v4中迁移到flexbox，您可以使用诸如.me auto之类的边距实用程序强制同级列彼此分离。
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>独立列类
.col-*类也可以在 .row外部使用，为元素提供特定的宽度。当列类用作行的非直接子级时，将忽略填充。
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>这些类可以与实用程序一起使用来创建响应的浮动图像。如果文本较短，请确保将内容包装在.clearfix包装器中以清除浮动。
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>