View on GitHub

栅格系统

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

怎样工作

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

刚接触或不熟悉flexbox? 阅读本CSS技巧flexbox指南 ,了解背景、术语、指南和代码片段。

One of three columns
One of three columns
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的页面中居中。

分解它,下面是它的工作原理:

  • 容器提供了一种将站点内容居中并水平放置的方法。使用.container 表示响应像素宽度,或使用 .container-fluid 表示在所有视口和设备大小上为 width: 100%
  • 行是列的包装器。每列都有水平 padding (称为槽( gutter)),用于控制它们之间的padding。然后在具有负边距的行上抵消此填充。这样,列中的所有内容都会在视觉上从左侧向下对齐。
  • 在网格布局中,内容必须放置在列中,并且只有列可以是行的直接子级。
  • 由于flexbox,没有指定 width的网格列将自动作为等宽列进行布局。例如,.col-sm 的四个实例将自动从小断点向上扩展25%。有关更多示例,请参见自动布局列部分。
  • 列类表示每行可能使用的12列中的列数。所以,如果您想要三个等宽的列,可以使用 .col-4
  • width是以百分比设置的,因此它们相对于父元素总是流动的,并且大小也是固定的。
  • 列具有水平 padding 以在各个列之间创建檐槽,但是,您可以删除行中的 margin.row.no-gutters的列中的padding
  • 为了使网格响应,有五个网格断点,每个断点对应一个:所有断点(extra-small)、small、medium、large和extra-large。
  • 网格断点基于最小宽度媒体查询,这意味着 它们适用于该断点及其上的所有断点 (例如,.col-sm-4 适用于小型、中型、大型和超大设备,但不适用于第一个 xs断点)。
  • 您可以使用预定义的网格类(如 .col-4)或 Sass mixins 来进行更多的语义标记。

注意flexbox的局限性和 缺陷比如不能将一些HTML元素用作flex容器

网格选项

Bootstrap使用 emrem定义大多数大小, px用于网格断点和容器宽度。这是因为视口宽度以像素为单位,并且不随 font size而改变。

通过一个方便的表格,了解Bootstrap 网格系统的各个方面如何跨多个设备工作。

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

自动布局列

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

等宽

例如,这里有两个网格布局,适用于从xsxll的每个设备和视口。为每个断点添加任意数量的无单元类,每个列的宽度都相同。

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>

等宽多行

通过插入 .w-100来创建跨多行的等宽列,您希望这些列在此处换行。将 .w-100 与一些 响应性显示工具混合,使中断响应。

有一个 Safari flexbox bug ,它阻止了在没有明确的 flex-basisborder的情况下工作。对于较旧的浏览器版本有一些变通方法,但是如果您的目标浏览器不属于有缺陷的版本,就不需要这些方法。

col
col
col
col
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</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
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
col-sm
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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.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>

槽(Gutters)

槽(Gutters) 可以通过断点特定的填充和负边距实用程序类进行相应的调整。若要更改给定行中的檐槽,请将 .row上的负边距实用程序与.col上的匹配填充实用程序配对。可能还需要调整 .container.container-fluid父级,以避免不必要的溢出,再次使用匹配填充实用程序。

下面是一个在大(lg)断点及以上自定义Bootstrap的示例。我们用.px-lg-5 增加了 .col 填充,用父.row上的 .mx-lg-n5抵消了这一点,然后用.px-lg-5 调整了 .container包装。

Custom column padding
Custom column padding
<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

行列

使用响应式 .row-cols-* 类快速设置最能呈现内容和布局的列数。普通的 .col-* 类应用于各个列(例如 .col-md-4),而 行列类是作为快捷方式在父 .row上设置的。

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

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

对齐

使用flexbox对齐实用程序垂直和水平对齐列。 当flex容器的 min-height如下所示时,Internet Explorer 10-11不支持flex项目的垂直对齐。 有关更多详细信息,请参见FlexBug#3

垂直对齐

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
One of three columns
One of three columns
One of three columns
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

没有槽(No gutters)

在我们预定义的网格类中,列之间的gutters可以使用.no-gutters删除。这将删除.row的负 margin,和所有直接子列的水平 padding

下面是创建这些样式的源代码。请注意,列重写的作用域仅限于第一个子列,并通过属性选择器作为目标。虽然这会生成一个更具体的选择器,但仍可以使用 间距实用程序进一步自定义列填充。

需要边到边的设计吗? 放下父 .container.container-fluid

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

实际上,它看起来是这样的。注意:您可以继续将其用于所有其他预定义的网格类(包括列宽、响应层、重排序等)。

.col-sm-6 .col-md-8
.col-6 .col-md-4
<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列包装

如果一行中放置的列数超过12列,则每组额外列将作为一个单元换行。

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

列中断

在flexbox中将列拆分为新行需要一个小技巧:添加一个 width: 100% 的元素,无论您想在哪里将列包装到新行。通常这是通过多个.row来完成的,但不是每个实现方法都能解释这一点。

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

您还可以在特定的断点上使用我们的响应显示实用程序进行此中断。

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

重新排序

排序类

使用 .order- 类控制内容的视觉顺序。这些类是响应的,因此您可以按断点设置order(例如, .order-1.order-md-2)。包括对所有五个网格层的112的支持。

First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1
<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

还有 响应式 .order-first.order-lastt类,它们分别通过应用order: -1order: 13 (order: $columns + 1) 来更改元素的 order。这些类也可以根据需要与编号的 .order-*类混合使用。

First in DOM, ordered last
Second in DOM, unordered
Third in DOM, ordered first
<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

偏移列

您可以通过两种方式偏移网格列:我们的响应式 .offset- 栅格类和 margin 实用程序。网格类的大小与列匹配,而边距对于偏移宽度可变的快速布局更有用。

偏移类

使用 .offset-md-*类向右移动列。这些类将列的左边距增加 *列。例如, .offset-md-4 在四列上移动 .col-md-4

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

除了在响应断点处进行列清除之外,还可能需要重新设置偏移量。在网格示例中可以看到这一点。

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

边距实用程序

通过在v4中迁移到flexbox,您可以使用诸如 .mr-auto 之类的边距实用程序强制同级列彼此分离。

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

嵌套

要使用默认网格嵌套内容,请在现有的.col-sm-* 列中添加一个新的 .row 和一组.col-sm-*列。嵌套行应包含一组最多12个或更少的列(不要求使用所有12个可用列)。

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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 mixins

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

变量

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Mixins

mixin与网格变量一起使用,为单个网格列生成语义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变量和映射,可以完全定制预定义的网格类。更改层数、媒体查询维度和容器宽度,然后重新编译。

列和槽(Columns and gutters)

可以通过Sass变量修改网格列的数量。$grid-columns 用于生成每个单独列的宽度(以百分比为单位),而 $grid-gutter-width 用于设置列檐槽的宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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(而不是 remem%)设置网格值。