栅格（Grid）系统

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

On this page

示例

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

新手或不熟悉 flexbox？ 阅读本 CSS 技巧 flexbox 指南了解背景、术语、指南和代码片段。

Column

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上面的示例使用我们预定义的网格类在所有设备和视口上创建了三列等宽的列。这些列与父级.container一起居中显示在页面中。

如何工作

细分下来，网格系统是这样形成的：

我们的网格支持六个响应式断点。 断点基于 min-width 媒体查询，这意味着它们会影响该断点及其之上的所有断点（例如，.col-sm-4适用于 sm、md、lg、xl和 xxl）。这意味着您可以根据每个断点来控制容器和列的大小及行为。
容器可将内容居中并水平放置。 使用 .container表示响应式像素宽度，使用 .container-fluid表示所有视口和设备上的 width: 100% 宽度，或使用响应式容器（如 .container-md）表示流体和像素宽度的组合。
行是列的包装器。 每一列都有水平 padding（称为gutter），用于控制列之间的空间。这种 padding会在行上用负边距抵消，以确保列中的内容在视觉上向左对齐。行还支持修改器类，用于统一应用列的大小和间隙（gutter）类，以改变内容的间距。
列的灵活性令人难以置信。 每行有 12 模板列，允许你创建跨越任意列数的不同元素组合。列类表示要跨越的模板列数（例如，col-4跨越四列）。width是按百分比设置的，因此您可以始终获得相同的相对大小。
间隙（gutter）也是响应式和可定制的。 所有断点均可使用gutter类，其大小与我们的margin和padding距相同。使用 .gx-* 类更改水平边框，使用 .gy-* 类更改垂直边框，或使用 .g-* 类更改所有边框。.g-0 也可用于移除间隙（gutters）。
Sass变量、映射和混合组件为网格提供了动力。 如果您不想使用 Bootstrap 中预定义的网格类，可以使用我们的 grid’s source Sass来创建自己的网格，并使用更多语义标记。我们还提供了一些 CSS 自定义属性来使用这些 Sass 变量，为您提供更大的灵活性。

请注意 flexbox 的局限性和 Bug，例如无法将某些 HTML 元素用作 flex 容器。

网格选项

Bootstrap 的网格系统可以适应所有六个默认断点以及您自定义的任何断点。六个默认网格层级如下：

超小 (xs)
小号 (sm)
中号 (md)
大号 (lg)
特大号 (xl)
超大号 (xxl)

如上所述，每个断点都有自己的容器、独特的类前缀和修改器。下面是网格在这些断点上的变化情况：

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

自动布局列

利用特定于断点的列类，可轻松调整列的大小，而无需使用明确的编号类（如 .col-sm-6）。

等宽

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

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

html

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

设置单列宽度

flexbox 网格列的自动布局还意味着你可以设置单列的宽度，然后让同级列自动围绕它调整大小。您可以使用预定义的网格类（如下所示）、网格混合类或内联宽度。请注意，无论中心列的宽度如何，其他列都会调整大小。

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

html

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

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

html

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

html

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

html

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

html

<div class="container text-center">
  <!-- 在移动设备上堆叠列，将其中一列设置为全宽，另一列设置为半宽 -->
  <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>

  <!-- 移动设备上的列宽从 50% 开始，桌面设备上的列宽增至 33.3% -->
  <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>

  <!-- 在移动设备和台式机上，列宽始终为 50% -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

行列

使用响应式 .row-cols-* 类可快速设置列数，以最佳方式呈现内容和布局。普通的 .col-* 类适用于单列（如 .col-md-4），而行列类则作为快捷方式设置在父级 .row 上。使用 .row-cols-auto，你可以赋予列自然宽度。

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

Column

html

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

Column

html

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

Column

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

html

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

Column

html

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

Column

html

<div class="container text-center">
  <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);
  }
}

嵌套

要使用默认网格嵌套内容，请在现有的 .col-sm-* 列中添加新的 .row 和一组 .col-sm-* 列。嵌套行应包括一组列，列数相加不超过 12（不要求使用全部 12 个可用列）。

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>

CSS

在使用 Bootstrap 的 Sass 源文件时，您可以选择使用 Sass 变量和mixins函数来创建自定义、语义和响应式页面布局。我们预定义的网格类也使用了这些变量和mixins类，为快速响应式布局提供了一整套即用类。

Sass 变量

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss

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

Sass mixins

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

// 创建一系列列的包装器
@include make-row();

// 使元素就绪网格（应用除宽度以外的所有功能）
@include make-col-ready();

// 如果没有可选的大小值，混合元素将创建相等的列（类似于使用 .col）
@include make-col();
@include make-col($size, $columns: $grid-columns);

// 带margins 边距的偏移
@include make-col-offset($size, $columns: $grid-columns);

使用示例

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

.example-container {
  @include make-container();
  // 确保在 mixin 之后定义此宽度，以覆盖
  // width: 100% ` 由 `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);
  }
}

Main content

Secondary content

html

<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 变量和映射，可以完全自定义预定义的网格类。更改层数、媒体查询尺寸和容器宽度，然后重新编译。

列和间隙（gutters）

网格列数可通过 Sass 变量修改。$grid-columns 用于生成每一列的宽度（百分比），而 $grid-gutter-width 则用于设置列间隙的宽度。$grid-row-columns 用于设置 .row-cols-* 的最大列数，超过此限制的任何数字都将被忽略。

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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 或 %）为单位设置网格值。