网格系统

借助12列系统、6个默认响应层、Sass变量和mixin以及数十个预定义类，使用我们强大的mobile-first flexbox网格构建各种形状和大小的布局。

在本页面

示例

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

新手还是不熟悉flexbox？ 阅读本CSS Tricks flexbox指南，了解背景，术语，指南和代码段。

One of three columns

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上面的示例使用预定义的网格类在所有设备和视口中创建三个等宽列。这些列与父项一起位于.container页面的中。

这个怎么运作

将其分解，以下是网格系统是如何组合在一起的：

我们的网格支持6个响应断点.。断点是基于min-width媒体查询，这意味着它们会影响该断点及其上的所有断点（例如，.col-sm-4适用于 sm, md, lg, xl, 和 xxl）。这意味着您可以通过每个断点控制容器和列的大小以及行为。
容器居中并水平放置内容。 使用 .container表示响应像素宽度， .container-fluid 表示 width: 100%覆盖所有视口和设备，或使用响应容器（例如 .container-md）表示流体和像素宽度的组合。
行是列的包装器。每列都有水平 padding（称为Gutters），用于控制它们之间的间距。然后在具有负边距的行上抵消此 padding，以确保列中的内容在视觉上与左侧对齐。行还支持修饰符类，以统一应用列大小，并支持边距类来更改内容的间距。
列非常灵活。 每行有12个模板列，可让您创建跨越任意数量列的元素的不同组合。列类表示要跨越的模板列的数量（例如， col-4 跨越四个列）。 width是按百分比设置的，因此相对大小总是相同的。
槽(Gutters)也可以响应并可以自定义。 Gutter 类可用于所有断点，其大小与 margin 和 padding 间距相同。将水平 gutters 改为 .gx-* 类，将垂直gutters改为.gy-*类，或者将所有 gutters 改为 .g-* 类。 .g-0也可用于移除 gutters.
Sass 变量，映射，和 mixins为网格提供动力。 如果您不想在Bootstrap中使用预定义的网格类，您可以使用我们的网格源 Sass创建您自己的具有更多语义标记的网格类。我们还包括一些CSS自定义属性来使用这些Sass变量，为您提供更大的灵活性。

注意flexbox的局限性和缺陷，比如无法将一些HTML元素用作flex容器。

网格选项

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

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

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

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

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

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

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

<div class="container">
  <!-- 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你可以给自己列自然宽。

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

Column

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

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

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

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

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

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

嵌套

要使用默认网格嵌套内容，请在现有的 and set of .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

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

Sass

使用 Bootstrap的源 Sass 文件时，可以选择使用 Sass变量和mixin来创建自定义、语义和响应页面布局。我们预定义的网格类使用这些相同的变量和mixin来为快速响应的布局提供一整套现成的类。

变量

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

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

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

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

混合（Mixins）

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@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);
  }
}

Main content

Secondary content

<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-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

网格层

除了列本身之外，还可以自定义网格层的数量。如果您只需要4个网格层，您可以将 $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, 或 %）设置网格值。