网格（Grid）

使用我们强大、行动优先的弹性盒子的网格来建立符合各种尺寸的网页排版，包含十二栏系统、六个缺省的响应式断点、Sass变量和mixins，以及很多预定义的类。

On this page

例子

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

刚接触或不熟悉弹性盒子设计flexbox？ 阅读本CSS技巧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的页面中居中。

工作原理

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

我们的网格支持六个响应断点。 断点基于最小宽度媒体查询，这意味着它们会影响该断点及其上的所有断点（例如，col-sm-4适用于sm、md、lg、xl和xxl）。这意味着您可以通过每个断点控制容器和列的大小以及行为。
容器居中并水平放置内容。 使用.container表示响应像素宽度，.container-fluid表示宽度：100%覆盖所有视口和设备，或使用响应容器（例如..container-md)）表示流体和像素宽度的组合。
行是列的包装器。 每列都有水平填充（称为间隙），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充，以确保列中的内容在视觉上与左侧对齐。行还支持修改器类来统一应用列大小调整，并支持边距类来更改内容的间距。
列非常灵活。 每行有12个模板列可用，允许您创建跨任意列数的不同元素组合。列类表示要跨越的模板列的数量（例如，col-4 跨越四个列）。宽度是按百分比设置的，因此相对大小总是相同的。
间隙也响应和定制。 所有断点上都可以使用Gutter类，其大小与边距和填充间距相同。将水平间隙更改为.gx-*类，将垂直间隙更改为.gy-*类，或将所有间隙更改为.g-*类。g-0也可用于移除间隙。
Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. Sass变量、地图和mixin为电网供电。如果您不想在Bootstrap中使用预定义的网格类，您可以使用我们的网格源Sass创建您自己的具有更多语义标记的网格类。我们还包括一些CSS自定义属性来使用这些Sass变量，为您提供更大的灵活性。

注意flexbox的局限性和缺陷，比如不能将一些HTML元素用作flex容器。 inability to use some HTML elements as flex containers.

网格选项

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

超小型 (xs)
小型 (sm)
中等 (md)
大 (lg)
特大 (xl)
超特大 (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>

设置一个列宽

弹性盒子网格列的自动布局还意味着您可以设置一列的宽度，并使其周围的同级列自动调整大小。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都将调整大小。

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-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-cols-auto类是作为快捷方式在父.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>

You can also use the accompanying 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

<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来为快速响应的布局提供一整套现成的类。

变量

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

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

列和间隙

可以通过Sass变量修改网格列的数量$grid columns用于生成每个单独列的宽度（以百分比为单位），而$grid gutter width用于设置列间隙的宽度

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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或%）设置网格值。