列

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

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

他们如何工作

🌐 How they work

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

对其

🌐 Alignment

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

🌐 Use flexbox alignment utilities to vertically and horizontally align columns.

垂直对齐

🌐 Vertical alignment

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

🌐 Change the vertical alignment with any of the responsive align-items-* classes.

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

🌐 Or, change the alignment of each column individually with any of the responsive .align-self-* classes.

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>

水平对齐

🌐 Horizontal alignment

使用任意响应式 justify-content-* 类来更改水平对齐方式。

🌐 Change the horizontal alignment with any of the responsive justify-content-* classes.

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>

列环绕

🌐 Column wrapping

如果单行中放置的列超过 12 列，则每组额外的列将作为一个单元换行到新行。

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

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

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>

分栏符

🌐 Column breaks

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

🌐 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. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

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

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

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>

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

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

🌐 Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers.

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。这些类也可以根据需要与带编号的 .order-* 类混合使用。

🌐 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. These classes can also be intermixed with the numbered .order-* classes as needed.

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>

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

🌐 If you need more .order-* classes, you can add new ones by modifying our $utilities Sass map. Read our Sass maps and loops docs or our Modify utilities docs for details.

$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
          )
        ),
      ),
    ),
  )
);

偏移列

🌐 Offsetting columns

你可以通过两种方式来偏移网格列：我们的响应式 .offset- 网格类和我们的边距工具。网格类的大小与列匹配，而边距更适用于偏移宽度可变的快速布局。

🌐 You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. 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

使用 .offset-md-* 类向右移动列。这些类将列的左边距增加 * 列。例如，.offset-md-4 会将 .col-md-4 向右移动四列。

🌐 Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

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

除了在响应断点清除列之外，你可能还需要重置偏移。在网格示例中查看其效果。

🌐 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

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 utilities

随着 v4 中转向 flexbox，你可以使用像 .me-auto 这样的边距工具类来将相邻的列彼此分开。

🌐 With the move to flexbox in v4, you can use margin utilities like .me-auto to force sibling columns away from one another.

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

独立列类

🌐 Standalone column classes

.col-* 类也可以在 .row 外使用，以给元素设置特定的宽度。每当列类作为行的非直接子元素使用时，内边距将被省略。

🌐 The .col-* classes can also be used outside a .row to give an element a specific width. 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

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 容器中以清除浮动。

🌐 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 类的用法。我们在这里添加了相当多无意义的短语，以演示列与浮动图片的相互作用。

正如你所见，段落优雅地围绕浮动的图片环绕。现在想象一下，如果这里有一些实际内容，而不仅仅是这些冗长无趣的占位文本，这将会是什么样子，这些文本不断延伸，却实际上没有传达任何具体信息。它们只是占据空间，实际上不应该被阅读。

然而，你仍然在这里，继续阅读这段占位符文本，希望获得更多的见解，或者一些隐藏的彩蛋内容。也许是一个Jest。不幸的是，这里什么都没有。

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>
    然而，你仍然在这里，继续阅读这段占位符文本，希望获得更多的见解，或者一些隐藏的彩蛋内容。也许是一个Jest。不幸的是，这里什么都没有。
  </p>
</div>