列

了解如何使用少量的选项修改列，包括对齐、排序和偏移，这要归功于我们的弹性盒子网格系统。此外，了解如何使用列类来管理非网格元素的宽度。

本页目录

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

它们是如何工作的

列建立在网格的弹性布局架构上。 Flexbox 意味着我们可以选择更改单独的列和在行级修改列组你可以选择列如何增长、缩小或以其他方式变化。
在构建网格布局时，所有内容都放在列中。 Bootstrap 网格的层次结构从容器将内容从行移到列。在极少数情况下，你可以将内容和列合并，但请注意可能会有意想不到的后果。
Bootstrap 包含用于创建快速响应布局的预定义类。 与六个断点在每个网格层都有十几列，我们已经为你创建了数十个类来构建你想要的布局。如果你愿意，可以通过 Sass 禁用它。

对齐

使用 Flex 对齐工具类来垂直和水平对齐列。

垂直对齐

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

三列之一

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>

三列之一

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>

三列之一

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

三列之一

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

两列之一

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
由于 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, 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

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>
<span class="token comment">&lt;!-- Force next columns to break to new line --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-100<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-6 col-sm-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-6 col-sm-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</div>
</div>

你还可以使用我们的响应式显示工具在特定断点处应用此换行。

.col-6 .col-sm-4

在 md 断点及以上强制下一列换行

.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>
<span class="token comment">&lt;!-- Force next columns to break to new line at md breakpoint and up --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-100 d-none d-md-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-6 col-sm-4<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col-6 col-sm-4<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>.col-6 .col-sm-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</div>
</div>

重新排序

订单类别

使用 .order- 类来控制内容的 视觉顺序。这些类是响应式的，因此你可以按断点设置 order（例如，.order-1.order-md-2）。在所有六个网格级别中，包括对 1 到 5 的支持。

在 DOM 中首先出现，无顺序应用

DOM 中的第二，其顺序更大

在 DOM 中第三，顺序为 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 通过应用一个元素 order: -1 和 order: 6，分别。这些类也可以与编号的混合 .order-* 根据需要上课。

在DOM中最先，但顺序最后

在 DOM 中第二，无序

在 DOM 中排第三，但排序为第一

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>

如果你需要更多.order-*类，可以通过修改我们的$utilities Sass 映射来添加新的类。阅读我们的 Sass Map 和循环文档或我们的修改工具文档了解详细信息。

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6, // Add a new `.order-{breakpoint}-6` utility
            last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
          )
        ),
      ),
    ),
  )
);

抵消列

你可以通过两种方式偏移网格列：我们响应式的.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-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>

边距工具

随着 v4 版本转向 Flexbox，你可以使用像 .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>

独立列类

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

.col-3：宽度为25%

.col-sm-9：在 sm 断点以上宽度为 75%

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