View on GitHub

列（Columns）

了解如何利用我们的 flexbox 网格系统提供的大量对齐、排序和偏移选项来修改列。此外，还可了解如何使用列类来管理非网格元素的宽度。

On this page

注意！ 在了解如何修改和自定义网格列之前，请务必先阅读网格页面。

如何工作

列建立在网格的flexbox架构之上。 Flexbox意味着我们可以选择改变单列和在行级别修改列组。您可以选择列的增长、收缩或其他变化方式。
在构建网格布局时，所有内容都要分栏。 Bootstrap 的网格层次结构是从 container 到行，再到列，最后到您的内容。在极少数情况下，您可以将内容和列结合起来，但要注意可能会产生意想不到的后果。
Bootstrap 包含用于创建快速、响应式布局的预定义类。 有了六个断点和每个网格层的十几个列，我们已经为你创建了几十个类来创建你想要的布局。如果您愿意，可以通过 Sass 禁用这些功能。

对齐

使用 Flexbox 对齐工具垂直和水平对齐列。

垂直对齐

使用任何响应式 align-items-* 类更改垂直对齐方式。

One of three columns

html

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

One of three columns

html

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

One of three columns

html

<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-*类单独更改每一列的对齐方式。

One of three columns

html

<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-* 类更改水平对齐方式。

One of two columns

html

<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
Since 9 + 4 = 13 > 12, 这个 4 栏宽的 div 将作为一个连续单元被包装到新行中。

.col-6
随后的栏继续沿新的线排列。

html

<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, 这个 4 栏宽的 div 将作为一个连续单元被包装到新行中。</div>
    <div class="col-6">.col-6<br>随后的栏继续沿新的线排列。</div>
  </div>
</div>

分隔栏

在 flexbox 中将列分成一行需要一个小技巧：在想要将列分成一行的地方添加一个 width: 100% 元素。通常这可以通过多个 .row来实现，但并非每种实现方法都能考虑到这一点。

.col-6 .col-sm-3

html

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

    <!-- 强制下一列换行 -->
    <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

html

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

    <!-- 强制下一列在 md 断点及以上位置换行 -->
    <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 变量修改默认数量。

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

html

<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-*`的类混合使用。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

html

<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- 网格类和我们的 margin 工具。网格类的大小与列相匹配，而 margin 更适用于偏移宽度可变的快速布局。

偏移类

使用 .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-6 .offset-md-3

html

<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

html

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

Margin 工具

在 v4 中转用 flexbox 后，您可以使用 margin 工具（如 .me-auto）来强制同级列彼此远离。

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

html

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

独立列级

也可以在 .row 以外使用 .col-* 类，为元素指定宽度。如果列类被用作行的非直接子元素，则会省略填充。

.col-3: width of 25%

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

html

<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 类的使用。我们在这里添加了一些毫无意义的短语，以演示列如何与浮动图像交互。

正如你所看到的，这些段落优雅地环绕着浮动图片。现在想象一下，如果这里有一些实际的内容，而不仅仅是这些乏味的占位符文本，会是什么样子。它只是占用了空间，不应该被阅读。

然而，你还在这里，还在坚持不懈地阅读这些占位文本，希望能得到更多的启示，或者一些隐藏的复活节彩蛋内容。也许是一个笑话。遗憾的是，这里没有。

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    一段占位符文本。我们用它来展示 clearfix 类的使用。我们在这里添加了一些毫无意义的短语，以演示列如何与浮动图像交互。
  </p>

  <p>
    正如你所看到的，这些段落优雅地环绕着浮动图片。现在想象一下，如果这里有一些实际的内容，而不仅仅是这些乏味的占位符文本，会是什么样子。它只是占用了空间，不应该被阅读。
  </p>

  <p>
    然而，你还在这里，还在坚持不懈地阅读这些占位文本，希望能得到更多的启示，或者一些隐藏的复活节彩蛋内容。也许是一个笑话。遗憾的是，这里没有。
  </p>
</div>