Grid system

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

On this page

示例

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它采用 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。

工作原理

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

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

请注意各种限制和与 flexbox 有关的 bug，例如无法将某些 HTML 元素用作 flex 容器。

网格选项

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

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (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 的网格包括6层预定义类，用于构建复杂的响应式布局。在超小型 extra small、小型 small、中型 medium、大型 large 或超大型 extra large设备上自定义栏的大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用 .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-*类，就能创建一个基本的网格系统，使得该系统一开始是堆叠的，在 small 断点 (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 变量和混合元素来创建自定义、语义和响应式页面布局。我们预定义的网格类使用这些相同的变量和混合类，为快速响应式布局提供了一整套即用类。

Sass 变量

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

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

// 使元素 grid-ready（应用除宽度以外的所有内容）
@include make-col-ready();

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

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

使用示例

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

.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);
  }
}

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

列和间隙

网格列数可通过 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 变量或Map进行任何更改时，都需要保存更改并重新编译。这样做将输出一组全新的预定义网格类，用于列宽、偏移和排序。响应式可见度实用程序也将更新，以使用自定义断点。确保以 px（而不是 rem、em 或 %）为单位设置网格值。