网格系统

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

在此页面上

示例

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

不熟悉 flexbox？ 阅读此 CSS Tricks flexbox 指南，了解背景、术语、指南和代码片段。

列

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；对于所有视口和设备的 width: 100%，使用 .container-fluid；或者对于流体和像素宽度的组合，使用响应容器（例如，.container-md）。
行是列的包装器。每列都有水平padding（称为间距）用于控制它们之间的空间。然后在行上使用负边距抵消此padding，以确保列中的内容在左侧垂直对齐。行还支持修饰符类，以统一应用列大小和间距类来更改内容的间距。
列非常灵活。每行有 12 个模板列，允许您创建跨越任意数量列的不同元素组合。列类指示要跨越的模板列数（例如，col-4跨越四列）。width以百分比设置，因此您始终具有相同的相对大小。
间距也具有响应能力且可自定义。间距类在所有断点中都可用，与我们的边距和内边距间距具有相同的所有大小。使用.gx-*类更改水平间距，使用.gy-*类更改垂直间距，或使用.g-*类更改所有间距。.g-0也可用于移除间距。
Sass 变量、映射和混合支持网格。如果您不想在 Bootstrap 中使用预定义的网格类，则可以使用我们的网格源 Sass使用更语义化的标记创建自己的网格。我们还包括一些 CSS 自定义属性来使用这些 Sass 变量，以便为您提供更大的灵活性。

请注意 Flexbox 的局限性和错误，例如无法将某些 HTML 元素用作 Flex 容器。

网格选项

Bootstrap 的网格系统可以在所有六个默认断点以及您自定义的任何断点中进行调整。六个默认网格层如下

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

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

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
容器 `max-width`	无（自动）	540px	720px	960px	1140px	1320px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
列数	12
间距宽度	1.5rem（左右各 0.75rem）
自定义间距	是
可嵌套	是
列排序	是

自动布局列

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

等宽

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

1/2

2/2

1/3

2/3

3/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/3

2/3（更宽）

3/3

1/3

2/3（更宽）

3/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/3

可变宽度内容

3/3

1/3

可变宽度内容

3/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">
  <!-- 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-cols-* 类来快速设置最适合呈现你的内容和布局的列数。虽然常规 .col-* 类适用于各个列（例如 .col-md-4），但行列类被设置为父 .row 上的快捷方式。使用 .row-cols-auto，你可以赋予列其自然宽度。

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

列

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>

列

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>

列

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>

列

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>

列

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>

列

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 个可用列）。

第 1 级：.col-sm-3

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

第 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 变量和 mixin 来创建自定义、语义化和响应式的页面布局。我们预定义的网格类使用这些相同的变量和 mixin 来提供一整套可随时使用的类，以实现快速响应式布局。

Sass 变量

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

$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 混合

混合与网格变量结合使用，为各个网格列生成语义 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();

// 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);

示例用法

你可以将变量修改为自己的自定义值，或者仅使用带有默认值的混合。以下是如何使用默认设置创建带间距的两列布局的示例。

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

主要内容

辅助内容

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

列和间距

可以通过 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 或 %）。