网格系统

使用我们强大的移动优先 flexbox 网格，借助十二列系统、五个默认响应层级、Sass 变量和混合以及数十个预定义类，构建各种形状和大小的布局。

工作原理

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它使用 flexbox 构建，并且完全响应式。下面是一个示例和一个深入了解网格如何组合在一起的示例。

不熟悉 flexbox 或从未接触过 flexbox？ 阅读此 CSS Tricks flexbox 指南以了解背景、术语、指南和代码片段。

三列之一

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上面的示例使用我们的预定义网格类，在小型、中型、大型和超大型设备上创建了三列等宽列。这些列使用父级 .container 居中显示在页面中。

分解一下，以下是它的工作原理

容器提供了一种方法来居中和水平填充您网站的内容。对于响应式像素宽度，请使用 .container，对于所有视口和设备大小，请使用 width: 100% 的 .container-fluid。
行是列的包装器。每列都有水平 padding（称为间距），用于控制它们之间的空间。然后用负边距抵消行上的此 padding。这样，列中的所有内容在视觉上都沿左侧对齐。
在网格布局中，内容必须放置在列中，并且只有列可以是行的直接子级。
由于 flexbox，没有指定 width 的网格列将自动布局为等宽列。例如，.col-sm 的四个实例将从小型断点开始自动为 25% 的宽度。有关更多示例，请参阅自动布局列部分。
列类表示您希望在每行可能的 12 列中使用多少列。因此，如果您想要三个等宽列，则可以使用 .col-4。
列 width 以百分比设置，因此它们始终是流动的，并且相对于其父元素的大小。
列具有水平 padding 以创建各个列之间的间距，但是，您可以使用 .row 上的 .no-gutters 从行中删除 margin，从列中删除 padding。
为了使网格具有响应性，有五个网格断点，每个断点对应一个响应式断点：所有断点（超小）、小、中、大、超大。
网格断点基于最小宽度媒体查询，这意味着它们适用于该断点及其之上的所有断点（例如，.col-sm-4 适用于小型、中型、大型和超大型设备，但不适用于第一个 xs 断点）。
您可以使用预定义的网格类（如 .col-4）或Sass mixins 来获得更多语义标记。

注意 flexbox 的限制和错误，例如无法将某些 HTML 元素用作 flex 容器。

网格选项

虽然 Bootstrap 使用 em 或 rem 来定义大多数大小，但 px 用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不会随字体大小而改变。

通过一个方便的表格了解 Bootstrap 网格系统各个方面如何在多个设备上工作。

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	超大 ≥1200px
最大容器宽度	无（自动）	540px	720px	960px	1140px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列数	12
间距宽度	30px（列两侧各 15px）
可嵌套	是
列排序	是

自动布局列

利用特定于断点的列类，轻松调整列大小，无需使用显式编号类，如 .col-sm-6。

等宽

例如，以下是两个网格布局，适用于从 xs 到 xl 的所有设备和视口。为每个所需的断点添加任意数量的无单位类，则每列都将具有相同的宽度。

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽多行

通过在希望列换行的位置插入 .w-100 来创建跨多行的等宽列。通过将 .w-100 与一些响应式显示实用程序混合，使换行具有响应性。

有一个 Safari flexbox bug，如果没有显式的 flex-basis 或 border，则无法解决此问题。对于较旧的浏览器版本，有一些解决方法，但如果目标浏览器没有陷入 buggy 版本，则不需要这些解决方法。

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

设置一列宽度

flexbox 网格列的自动布局还意味着您可以设置一列的宽度，并让兄弟列自动调整其周围的大小。您可以使用预定义的网格类（如下所示）、网格 mixin 或内联宽度。请注意，无论中心列的宽度如何，其他列都会调整大小。

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度内容

使用 col-{breakpoint}-auto 类根据其内容的自然宽度调整列的大小。

1 of 3

可变宽度内容

3 of 3

1 of 3

可变宽度内容

3 of 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

响应式类

Bootstrap 的网格包含五层预定义类，用于构建复杂的响应式布局。您可以根据需要自定义超小、小、中、大或超大设备上列的大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用 .col 和 .col-* 类。当您需要特定大小的列时，请指定一个编号类；否则，请随时坚持使用 .col。

col

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

堆叠到水平

使用一组 .col-sm-* 类，您可以创建一个基本的网格系统，该系统从堆叠开始，并在小断点 (sm) 处变为水平。

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

混合搭配

不想让您的列在某些网格层中简单地堆叠？根据需要为每个层使用不同类的组合。请参阅以下示例，以更好地了解其工作原理。

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

间隙

间距可以通过特定于断点的填充和负边距实用程序类进行响应式调整。若要更改给定行中的间距，请将负边距实用程序与 .row 配对，并在 .col 上匹配填充实用程序。.container 或 .container-fluid 父级可能也需要进行调整以避免不必要的溢出，再次使用匹配的填充实用程序。

以下是在大 (lg) 断点及以上自定义 Bootstrap 网格的示例。我们使用 .px-lg-5 增大了 .col 填充，使用父级 .row 上的 .mx-lg-n5 抵消了该填充，然后使用 .px-lg-5 调整了 .container 包装器。

自定义列填充

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

行列

使用响应式 .row-cols-* 类快速设置最适合呈现内容和布局的列数。虽然常规 .col-* 类适用于各个列（例如，.col-md-4），但行列类被设置为父级 .row 作为快捷方式。

使用这些行列类快速创建基本网格布局或控制卡片布局。

列

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

列

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

列

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

列

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

列

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

您还可以使用随附的 Sass mixin row-cols()

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

对齐

使用 flexbox 对齐实用程序垂直和水平对齐列。当 flex 容器具有如下所示的 min-height 时，Internet Explorer 10-11 不支持 flex 项目的垂直对齐。 有关更多详细信息，请参阅 Flexbugs #3。

垂直对齐

三列之一

<div class="container">
  <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 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 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>

三列之一

<div class="container">
  <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>

水平对齐

两列之一

<div class="container">
  <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>

无间隙

可以使用 .no-gutters 删除我们预定义网格类中的列之间的间距。这会删除 .row 中的负 margin 和所有直接子列中的水平 padding。

以下是创建这些样式的源代码。请注意，列覆盖仅限于第一个子列，并且通过属性选择器为目标。虽然这会生成更具体的选取器，但列填充仍可以使用间距实用程序进一步自定义。

需要边缘到边缘的设计吗？ 删除父级 .container 或 .container-fluid。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

在实践中，它看起来如下所示。请注意，您可以继续将其与所有其他预定义网格类（包括列宽、响应层、重新排序等）一起使用。

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列换行

如果在一行中放置 12 列以上，每组额外的列将作为整体换行到新行。

.col-9

.col-4
由于 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 &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

<div class="container">
  <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

<div class="container">
  <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 到 12 的支持。

在 DOM 中首先，未应用顺序

在 DOM 中其次，具有较大的顺序

在 DOM 中第三，具有顺序 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      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: 13（order: $columns + 1）来更改元素的 order。这些类还可以根据需要与编号的 .order-* 类混合使用。

在 DOM 中首先，最后排序

在 DOM 中其次，未排序

在 DOM 中第三，首先排序

<div class="container">
  <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-6 .offset-md-3

<div class="container">
  <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">
  <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，您可以使用边距实用程序（如 .mr-auto）来强制兄弟列彼此远离。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

嵌套

要使用默认网格嵌套内容，请在现有 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。嵌套行应包括一组列，这些列加起来最多为 12 列（不必使用所有 12 个可用列）。

第 1 级：.col-sm-9

第 2 级：.col-8 .col-sm-6

第 2 级：.col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass 混合

使用 Bootstrap 的源 Sass 文件时，可以选择使用 Sass 变量和混合来创建自定义的、语义化的、响应式的页面布局。我们预定义的网格类使用相同的变量和混合，为快速响应式布局提供了一整套即用型类。

变量

变量和映射决定了列数、间距宽度以及开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类，以及下面列出的自定义混合。

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

混合

混合与网格变量结合使用，为各个网格列生成语义化的 CSS。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

示例用法

你可以将变量修改为自己的自定义值，或者只使用混合及其默认值。下面是一个使用默认设置创建带有间隙的两栏布局的示例。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

主要内容

次要内容

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

自定义网格

使用我们内置的网格 Sass 变量和映射，可以完全自定义预定义的网格类。更改层数、媒体查询维度和容器宽度，然后重新编译。

列和间隙

可以通过 Sass 变量修改网格列数。$grid-columns 用于生成每列的宽度（以百分比表示），而 $grid-gutter-width 设置列间距的宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

网格层级

除了列本身之外，你还可以自定义网格层数。如果你只想要四个网格层，则需要将 $grid-breakpoints 和 $container-max-widths 更新为类似以下内容

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

对 Sass 变量或映射进行任何更改时，你需要保存更改并重新编译。这样做会输出一组全新的预定义网格类，用于列宽、偏移和排序。响应式可见性实用程序也将更新为使用自定义断点。确保在 px（不是 rem、em 或 %）中设置网格值。