Columns多列

~~Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.~~ 借助我们的弹性盒网格系统，了解如何使用少量对齐、排序和偏移选项修改多列。~~Plus, see how to use column classes to manage widths of non-grid elements.~~另外，请参阅如何使用列类管理非轴网图元的宽度。

~~On this page~~本页内容

~~Heads up!~~小心！ ~~Be sure to read the Grid page first before diving into how to modify and customize your grid columns.~~在深入了解如何修改和自定义网格列之前，请确保先阅读网格页面。

How they work作用原理

~~Columns build on the grid’s flexbox architecture.~~列构建在网格的弹性盒体系结构上。 ~~Flexbox means we have options for changing individual columns and modifying groups of columns at the row level.~~ 弹性盒意味着我们可以在行级别更改单个列和修改列组。~~You choose how columns grow, shrink, or otherwise change.~~您可以选择列的增长、收缩或其他更改方式。
~~When building grid layouts, all content goes in columns.~~构建网格布局时，所有内容都以列的形式显示。 ~~The hierarchy of Bootstrap’s grid goes from container to row to column to your content.~~ Bootstrap网格的层次结构从容器到行到列再到内容。~~On rare occasions, you may combine content and column, but be aware there can be unintended consequences.~~在极少数情况下，您可能会将内容和专栏结合起来，但请注意可能会出现意外后果。
~~Bootstrap includes predefined classes for creating fast, responsive layouts.~~Bootstrap包括用于创建快速响应布局的预定义类。 ~~With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts.~~ 每个网格层有六个断点和十几列，我们已经为您构建了几十个类来创建所需的布局。~~This can be disabled via Sass if you wish.~~如果您愿意，可以通过Sass禁用此功能。

Alignment对齐

~~Use flexbox alignment utilities to vertically and horizontally align columns.~~使用flexbox对齐实用程序垂直和水平对齐列。

Vertical alignment垂直对齐

One of three columns

<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>

One of three columns

<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>

Horizontal alignment水平对齐

One of two columns

<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>

Column wrapping列包装

~~If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.~~如果一行中放置的列超过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.

<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>

Column breaks列断开

~~Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.~~ 在flexbox中将列拆分为新行需要一个小技巧：在要将列换行到新行的任何位置添加一个宽度为100%的元素。~~Normally this is accomplished with multiple .rows, but not every implementation method can account for this.~~通常这是通过多个.row来完成的，但不是每个实现方法都能解释这一点。

.col-6 .col-sm-3

<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>

~~You may also apply this break at specific breakpoints with our responsive display utilities.~~您也可以使用我们的响应显示实用程序在特定断点处应用此中断。

.col-6 .col-sm-4

<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>

Reordering重新排序

Order classes排序类

~~Use .order- classes for controlling the visual order of your content.~~ 使用.order-类控制内容的视觉顺序。~~These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2).~~ 这些类是响应的，因此您可以按断点设置order（例如，.order-1.order-md-2）。~~Includes support for 1 through 5 across all six grid tiers.~~包括对所有六个网格层的1到5的支持。

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

<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>

~~There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 6, respectively.~~ 还有响应的.order-first和.order-last类，它们分别通过应用order:-1和order:6来更改元素的顺序。~~These classes can also be intermixed with the numbered .order-* classes as needed.~~这些类也可以根据需要与编号的.order-*类混合使用。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

<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>

Offsetting columns偏移列

~~You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities.~~ 您可以通过两种方式偏移网格列：我们的响应式.offset-grid类和我们的边距实用工具。~~Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.~~网格类的大小与列匹配，而边距对于偏移宽度可变的快速布局更有用。

Offset classes偏移类

~~Move columns to the right using .offset-md-* classes.~~ 使用.offset-md-*类将列向右移动。~~These classes increase the left margin of a column by * columns.~~ 这些类将列的左边距增加*列。~~For example, .offset-md-4 moves .col-md-4 over four columns.~~例如，.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

<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>

~~In addition to column clearing at responsive breakpoints, you may need to reset offsets.~~ 除了在响应断点处清除列之外，还可能需要重置偏移量。~~See this in action in the grid example.~~请参见网格示例中的实际操作。

.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

<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>

Margin utilities边距实用工具

~~With the move to flexbox in v4, you can use margin utilities like .me-auto to force sibling columns away from one another.~~通过在v4中迁移到flexbox，您可以使用诸如.me-auto之类的边距实用程序强制兄弟列彼此分离。

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-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>

Standalone column classes独立列类

~~The .col-* classes can also be used outside a .row to give an element a specific width.~~ .col-*类也可以在.row外部使用，以赋予元素特定的宽度。~~Whenever column classes are used as non direct children of a row, the paddings are omitted.~~当列类用作行的非直接子级时，将省略填充。

.col-3: width of 25%

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

<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>

~~The classes can be used together with utilities to create responsive floated images.~~ 这些类可以与实用程序一起用于创建响应性浮动图像。~~Make sure to wrap the content in a .clearfix wrapper to clear the float if the text is shorter.~~如果文本较短，请确保将内容包装在.clearfix包装器中以清除浮动。

~~A paragraph of placeholder text.~~ 占位符文本的一段。~~We're using it here to show the use of the clearfix class.~~ 我们在这里使用它来展示clearfix类的使用。~~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>