了解如何使用我们的 flexbox 网格系统修改列，该系统提供了多种对齐、排序和偏移选项。此外，了解如何使用列类管理非网格元素的宽度。
在此页面上
注意！在深入了解如何修改和自定义网格列之前，请务必阅读网格页面。
工作原理
-
列建立在网格的 flexbox 架构之上。Flexbox 意味着我们可以选择更改各个列和在行级别修改列组。您可以选择列如何增长、收缩或进行其他更改。
-
在构建网格布局时，所有内容都位于列中。Bootstrap 网格的层次结构从容器到行到列再到您的内容。在极少数情况下，您可以组合内容和列，但请注意可能会产生意想不到的后果。
-
Bootstrap 包含用于创建快速响应式布局的预定义类。凭借六个断点和每个网格层中的十几列，我们已经为您构建了数十个类，以便创建所需的布局。如果您愿意，可以通过 Sass 禁用此功能。
对齐
使用 flexbox 对齐实用工具垂直和水平对齐列。
垂直对齐
使用任何响应式 align-items-* 类更改垂直对齐方式。
三栏之一
三栏之一
三栏之一
<div class="container text-center">
<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>
三栏之一
三栏之一
三栏之一
<div class="container text-center">
<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>
三栏之一
三栏之一
三栏之一
<div class="container text-center">
<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>或者，使用任何响应式 .align-self-* 类单独更改每栏的对齐方式。
三栏之一
三栏之一
三栏之一
<div class="container text-center">
<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>水平对齐
使用任何响应式 justify-content-* 类更改水平对齐方式。
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
两栏之一
<div class="container text-center">
<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 栏，每组额外的栏将作为一个单元换行到新行。
.col-9
.col-4
由于 9 + 4 = 13 > 12，这个 4 栏宽的 div 将作为一个连续单元换行到新行。
由于 9 + 4 = 13 > 12，这个 4 栏宽的 div 将作为一个连续单元换行到新行。
.col-6
后续栏继续沿着新行。
后续栏继续沿着新行。
<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 中将栏换行到新行需要一个小技巧：在希望将栏换行到新行的任何位置添加一个 width: 100% 元素。通常这是通过多个 .row 完成的，但并非每种实现方法都能解决此问题。
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div class="container text-center">
<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>您还可以使用我们的 响应式显示实用程序 在特定断点处应用此换行。
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<div class="container text-center">
<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（例如，.order-1.order-md-2）。包括所有六个网格层中的 1 到 5 的支持。如果您需要更多 .order-* 类，可以通过 Sass 变量修改默认数字。
在 DOM 中排第一，未应用排序
在 DOM 中排第二，具有较大的排序
在 DOM 中排第三，排序为 1
<div class="container text-center">
<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。这些类还可以根据需要与编号的 .order-* 类混合使用。
在 DOM 中排第一，最后排序
在 DOM 中排第二，未排序
在 DOM 中排第三，首先排序
<div class="container text-center">
<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- 网格类和我们的 边距实用程序。网格类的尺寸与栏匹配，而边距对于偏移宽度可变的快速布局更有用。
偏移类
使用 .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
<div class="container text-center">
<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>除了在响应式断点处清除列外，您可能还需要重置偏移。在 网格示例 中查看此操作。
.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 text-center">
<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）来强制兄弟列彼此远离。
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
<div class="container text-center">
<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 外部使用，以赋予元素特定的宽度。每当列类用作行的非直接子元素时，都会省略填充。
.col-3：宽度为 25%
.col-sm-9：在 sm 断点以上宽度为 75%
<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>这些类可以与实用程序一起使用，以创建响应式浮动图像。确保将内容包装在 .clearfix 包装器中，以在文本较短时清除浮动。
一段占位符文本。我们在这里使用它来展示 clearfix 类的用法。我们在这里添加了很多无意义的短语，以展示列如何与浮动图像进行交互。
正如您所看到的，段落优雅地环绕浮动图像。现在想象一下，如果这里有一些实际内容，而不是仅仅是这个无聊的占位符文本，它会是什么样子，它会一直持续下去，但实际上并没有传达任何具体信息。它只是占用空间，实际上不应该被阅读。
然而，您仍然坚持阅读这段占位符文本，希望获得更多见解，或一些隐藏的内容彩蛋。一个笑话，也许。不幸的是，这里没有这些内容。
<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>