网格系统

借助十二列系统,五个默认响应层,Sass变量和mixin以及数十个预定义类,使用我们强大的移动优先Flexbox网格来构建所有形状和大小的布局。

怎么运行的

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

是新手还是不熟悉flexbox? Read this CSS Tricks flexbox guide , 术语,指南和代码段。

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%”。
  • 行是列的包装。 每列都有水平的“填充”(称为装订线),用于控制它们之间的间隔。 然后在具有负边距的行上抵消这种“填充”。 这样,您列中的所有内容在视觉上都在左侧向下对齐。
  • 在网格布局中,必须将内容放置在列中,并且只有列可以是行的直接子代。
  • 多亏了flexbox,没有指定宽度的网格列将自动按等宽列布局。 例如,四个“ .col-sm”实例将自动从小断点开始向上增加25%的宽度。 有关更多示例,请参见auto-layout columns 部分。
  • 列类表示每行可能使用的12列中的列数。 因此,如果要跨三个相等宽度的列,可以使用.col-4
  • 栏的宽度是按百分比设置的,因此它们总是相对于其父元素是可变的且大小合适。
  • 列具有水平的“填充”以在各个列之间创建装订线,但是,您可以在行中使用“ .no-gutters”删除行中的“ margin”和列中的“ padding”。
  • 为了使网格具有响应能力,有五个网格断点,每个responsive breakpoint: 都有一个:全部 断点(超小),小,中,大和特大。
  • 网格断点基于最小宽度的媒体查询,这意味着“它们适用于该一个断点以及该断点之上的所有断点”(例如,.col-sm-4适用于小型,中型,大型和超大型设备 ,但不是第一个xs`断点)。
  • 您可以使用预定义的网格类(如.col-4)或[Sass mixins](#sass-mixins)进行更多语义标记。

请注意局限性和bugs around flexbox,例如 inability to use some HTML elements as flex containers.

网格选项

Bootstrap使用em或rem来定义大多数大小,而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的显式编号类。

等宽

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

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与某些responsive display utilities混合在一起,使响应更加灵敏。

有一个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

可以通过特定于断点的填充和负余量实用程序类来快速调整装订线。 要更改给定行中的装订线,请将.row上的负边距实用程序与.cols上的匹配填充实用程序配对。 可能还需要使用重新匹配的padding实用程序来调整.container或.container-fluid父对象,以避免不必要的溢出。

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

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容器具有如下所示的“最小高度”时,Internet Explorer 10-11不支持flex项的垂直对齐。 See Flexbugs #3 for more details.

垂直对齐

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

可以使用.no-gutters除去我们预定义的网格类中各列之间的装订线。 这会从.row中排除负的margin,从所有直接子列中去除水平的padding。

这是用于创建这些样式的源代码。 请注意,列替代仅适用于第一个子列,并通过attribute selector进行定位。 尽管这会生成更具体的选择器,但仍可以使用spacing utilities进一步自定义列填充。

需要边缘到边缘的设计吗?丢弃父级.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>

Column wrapping

如果在一行中放置超过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>

您还可以使用我们的responsive display utilities在特定的断点处应用此中断。

.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 classes

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

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-last类,它们通过应用order:-1order:13order:$ 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 utilities。 网格类的大小可匹配列,而边距对于偏移宽度可变的快速布局更有用。

偏移类(classes)

使用.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>

除了在响应断点处清除列外,您可能还需要重置偏移量。 请在the grid example.

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

Margin utilities

随着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>

Nesting

要使用默认网格嵌套您的内容,请在现有的.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变量和mixins创建自定义,语义和响应式页面布局。 我们预定义的网格类使用这些相同的变量和mixin为快速响应的布局提供了一整套现成的类。

变量(Variables)

变量和映射确定列数,装订线宽度以及开始浮动列的媒体查询点。 我们使用它们来生成上面记录的预定义网格类,以及下面列出的自定义混合类。

$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

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

用法示例

您可以将变量修改为自己的自定义值,或仅将mixins和其默认值一起使用。 这是一个使用默认设置来创建一个两栏式布局,之间有一个间隙的示例。

.example-container {
  width: 800px;
  @include make-container();
}

.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: 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 (not rem, em, or %)。