列

借助我们的 Flexbox 网格系统，了解如何使用一些对齐、排序和偏移选项来修改列。另外，了解如何使用列类来管理非网格元素的宽度。

Heads up! Be sure to read the Grid page first before diving into how to modify and customize your grid columns.

他们如何工作

¥How they work

列建立在网格的 Flexbox 架构之上。Flexbox 意味着我们可以选择更改单个列和在行级别修改列组。你可以选择列的增长、收缩或其他变化方式。

¥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.
构建网格布局时，所有内容都位于列中。Bootstrap 网格的层次结构从容器到行到列到你的内容。在极少数情况下，你可以将内容和专栏结合起来，但请注意可能会产生意想不到的后果。

¥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. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
Bootstrap 包含用于创建快速、响应式布局的预定义类。通过六个断点和每个网格层的十几个列，我们已经构建了数十个类，供你创建所需的布局。如果你愿意，可以通过 Sass 禁用此功能。

¥Bootstrap includes predefined classes for creating fast, responsive layouts. 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.

对其

¥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 映射来添加新类。Read our Sass maps and loops docs or our Modify utilities docs for details.

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

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.

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.

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>