栅格系统

使用强大的mobile first flexbox网格来构建各种形状和大小的布局，这要归功于12列系统、6个默认响应层、Sass变量和mixin以及几十个预定义类。

本页导航↓

示例

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

刚接触或不熟悉flexbox? 阅读这个CSS技巧flexbox指南，了解背景知识、术语、指导原则和代码片段。

中文版的FlexBox布局教程可见：https://www.z01.com/help/web/3234.shtml （译者注）

三分之一空间占位

<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)作为流体和像素宽度的组合。
行(.row)是列(.col-*)的横向组合和父容器。每一列都有水平填充 padding (称为gutter)用于控制它们之间的空间。然后在具有负边距的行上抵消这种填充 padding ，以确保列中的内容在视觉上沿左侧对齐。行还支持修饰符类来统一应用列大小和 gutter来更改内容的间距。
列非常灵活。每行有12个模板列，允许您创建跨越任意数量列的元素的不同组合。列类表示要跨越的模板列的数量(例如， col-4 跨越4个)。宽度 width 是以百分比设置的，因此它们始终大小相同
沟槽也可以响应和自定。 Gutter可用于所有断点，其大小与边距和填充间距相同。使用 .gx-* 更改水平沟槽，使用 .gy-* 更改垂直沟槽，或使用 .g-* 类更改所有檐槽。 .g-0 也可用于去除沟槽。
Sass变量、map和mixin为网格提供动力。如果您不想在Bootstrap中使用预定义的网格类，则可以使用我们的网格源 Sass创建具有更多语义标记的自定义网格类。我们还包括一些CSS自定义属性，以使用这些Sass变量，从而为您提供更大的灵活性。

请注意：Flexbox布局虽然很先进，但也有一定的限制和错误，如无法使用某些HTML元素作为弹性容器，点此可了解相关知识。

栅格选项

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

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

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

	特小(xs) <576px	小(sm) ≥576px	中等(md) ≥768px	大(lg) ≥992px	超大(xl) ≥1200px	超大型(xxl) ≥1400px
Container `最大宽度`	None (auto)	540px	720px	960px	1140px	1320px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
列（column）数	12
沟槽宽度	1.5rem (.75rem on left and right)
自定义沟槽宽度	Yes
可嵌套性	Yes
列排序	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网格列的自动布局还意味着您可以设置一列的宽度，并使其周围的同级列自动调整大小。您可以使用预定义的网格类（如下所示）、网格mixin或内联宽度。请注意，无论中间列的宽度如何，其他列都将调整大小。

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>

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来创建自定义的、语义的和响应性的页面布局。我们预定义的grid类使用这些相同的变量和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 （not rem, em, or %）设置网格值。