网格系统

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

本页目录

示例

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

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

网格选项

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

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

如上所述，每个断点都有自己的容器、独特的类前缀和修饰符。以下是这些断点下网格的变化方式：

	xs <576像素	sm ≥576像素	医学博士 ≥768像素	LG ≥992像素	特大号 ≥1200像素	特大号 ≥1400像素
容器 `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。为每个需要的断点添加任意数量的无单位类，每一列的宽度都会相同。

2中的1

2之2

3中的1

3中的2

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

3中的1

3分之2（更宽）

3之3

3中的1

3 中的 2（较宽）

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 类根据内容的自然宽度来调整列的大小。

3中的1

可变宽度内容

3之3

3中的1

可变宽度内容

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。

列

列-8

列-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

在移动设备上，列的宽度从50%开始，在桌面设备上增加到33.3%

.col-6 .col-md-4

列在移动设备和桌面上的宽度始终为50%

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

嵌套

要使用默认网格嵌套你的内容，请添加一个新的 .row 和一组 .col-sm-* 现有中的列 .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 mixin

Mixins 与网格变量结合使用，以生成针对各个网格列的语义化 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);

示例用法

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

.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 或 %）。