网格系统 · Bootstrap 6.0 中文文档

示例

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它基于 flexbox 构建，完全响应式。下面是一个示例，并深入说明网格系统是如何协同工作的。

不熟悉 flexbox？阅读这份 CSS Tricks 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 媒体查询，也就是说它们会影响该断点及其以上的所有断点（例如 .sm:col-4 适用于 sm、md、lg、xl 和 2xl）。这意味着你可以按断点控制容器和列的尺寸与行为。
容器将内容居中并在水平方向留出内边距。使用 .container 获得响应式的固定像素宽度，使用 .container-fluid 在所有视口和设备上获得 width: 100%，或使用响应式容器（例如 .md:container）组合流体宽度与固定像素宽度。
行是列的包装器。每个列都有水平 padding（称为槽宽），用于控制列之间的间距。随后在行上用负外边距抵消这部分 padding，确保列中的内容在左侧视觉上对齐。行还支持修饰类来统一设置列宽，以及槽宽类来调整内容间距。
列非常灵活。每一行有 12 个模板列，你可以创建跨越任意列数的元素组合。列类表示要跨越的模板列数（例如 col-4 跨越四列）。width 以百分比设置，因此相对尺寸始终一致。
槽宽同样是响应式且可自定义的。槽宽类适用于所有断点，尺寸与我们的外边距和内边距工具类完全一致。用 .gx-* 类改变水平槽宽，用 .gy-* 改变垂直槽宽，或用 .g-* 同时设置两者。还提供 .g-0 用于移除槽宽。
Sass 变量、map 和 mixin 驱动着网格。如果你不想使用 Bootstrap 预定义的网格类，可以使用网格的源码 Sass，通过更语义化的标记创建自己的网格。我们还提供了一些 CSS 自定义属性来使用这些 Sass 变量，让你拥有更大的灵活性。

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

网格选项

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

超小（xs）
小（sm）
中（md）
大（lg）
超大（xl）
特大（2xl）

如上所述，每个断点都有自己的容器、唯一的类前缀和修饰符。网格在这些断点之间的变化如下：

	xs <576px	sm ≥576px	md ≥768px	lg ≥1024px	xl ≥1280px	2xl ≥1536px
容器 `max-width`	无（自动）	540px	720px	960px	1140px	1440px
类前缀	`.col-`	`.sm:col-`	`.md:col-`	`.lg:col-`	`.xl:col-`	`.2xl:col-`
列数	12
槽宽	1.5rem（左右各 .75rem）
自定义槽宽	支持
可嵌套	支持
列排序	支持

自动布局列

使用针对断点的列类，无需像 .sm:col-6 这样显式指定数字类，就能轻松设置列宽。

等宽

例如，下面两个网格布局适用于从 xs 到 2xl 的每个设备和视口。按需为每个断点添加任意数量的无单位类，每一列都会等宽。

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 网格列的自动布局还意味着，你可以设置某一列的宽度，并让相邻列围绕它自动调整大小。你可以使用预定义的网格类（如下所示）、网格 mixin 或内联宽度。注意，无论中间列的宽度如何，其他列都会重新调整大小。

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>

可变宽度内容

使用 {breakpoint}:col-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 md:justify-content-center">
    <div class="col lg:col-2">
      1 of 3
    </div>
    <div class="md:col-auto">
      Variable width content
    </div>
    <div class="col lg:col-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="md:col-auto">
      Variable width content
    </div>
    <div class="col lg:col-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>

从堆叠到水平

使用一组 .sm:col-* 类，可以创建一个基础的网格系统：在小断点（sm）以下堆叠，达到该断点后变为水平排列。

sm:col-8

sm:col-4

sm:col

HTML

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

混合搭配

不希望列在某些网格层级中只是简单堆叠？按需为每个层级组合不同的类。参见下面的示例，更好地理解它的工作方式。

.md:col-8

.col-6 .md:col-4

.col-6

HTML

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="md:col-8">.md:col-8</div>
    <div class="col-6 md:col-4">.col-6 .md:col-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 md:col-4">.col-6 .md:col-4</div>
    <div class="col-6 md:col-4">.col-6 .md:col-4</div>
    <div class="col-6 md:col-4">.col-6 .md:col-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-cols-* 类，可以快速设置最适合内容与布局的列数。普通的 .col-* 类作用于单个列（例如 .md:col-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 sm:row-cols-2 md: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>

你也可以使用配套的 Sass mixin row-cols()：

SCSS

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

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

嵌套

要使用默认网格嵌套内容，请在现有的 .sm:col-* 列中添加新的 .row 和一组 .sm:col-* 列。嵌套行中的列总和应为 12 或更少（不要求用满全部 12 列）。

Level 1: .sm:col-3

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

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

HTML

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

CSS

使用 Bootstrap 的源码 Sass 文件时，你可以选择用 Sass 变量和 mixin 创建自定义、语义化且响应式的页面布局。我们预定义的网格类同样使用这些变量和 mixin，提供了一整套开箱即用的类，用于快速构建响应式布局。

Sass 变量

变量和 map 决定列数、水平和垂直槽宽，以及开始浮动列的媒体查询断点。我们用它们生成上文记录的预定义网格类，以及下面列出的自定义 mixin。

SCSS

          $grid-columns:    12;
$grid-gutter-x:   1.5rem;
$grid-gutter-y:   0;
$grid-row-columns: 6;

scss/_config.scss

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px
);

scss/_config.scss

$container-max-widths: ();
// stylelint-disable-next-line scss/dollar-variable-default
$container-max-widths: defaults(
  (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1200px,
    2xl: 1440px
  ),
  $container-max-widths
);

Sass mixin

mixin 与网格变量配合使用，为单个网格列生成语义化的 CSS。

SCSS

          // Creates a wrapper for a series of columns
@include make-row(); // default values for both horizontal and vertical gutters
@include make-row(2rem); // 2rem for horizontal gutters and default value for vertical gutters
@include make-row(2rem, 1rem); // 2rem for horizontal gutters and 1rem for vertical gutters
@include make-row($gutter-y: 1rem); // default value for horizontal gutters and 1rem for vertical gutters

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

用法示例

你可以把变量修改为自己的值，或直接使用 mixin 的默认值。下面是一个使用默认设置创建带间隙的两列布局的示例。

SCSS

          .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-x 和 $grid-gutter-y 设置水平和垂直槽宽。$grid-row-columns 用于设置 .row-cols-* 的最大列数，超过此限制的数字会被忽略。

SCSS

          $grid-columns: 12 !default;
$grid-gutter-x: 1.5rem !default;
$grid-gutter-y: 0 !default;
$grid-row-columns: 6 !default;

网格层级

除了列本身，你还可以自定义网格层级的数量。如果你只想要四个网格层级，可以把 $breakpoints 和 $container-max-widths 改成类似这样：

SCSS

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

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

对 Sass 变量或 map 做出任何修改后，都需要保存并重新编译。这样会输出一整套全新的预定义网格类，用于列宽、偏移和排序。响应式可见性工具类也会更新为使用自定义断点。请确保以 px 设置网格值（不要用 rem、em 或 %）。