网格系统
使用我们强大的移动优先 flexbox 网格来构建各种形状和大小的布局,这要归功于 12 列系统、5 个默认响应层、Sass 变量和 mixin 以及数十个预定义类。
Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用flexbox构建的,并且是完全响应的。下面是一个示例,并深入了解了网格是如何组合在一起的。
刚接触或不熟悉 flexbox? 阅读此 CSS 技巧 flexbox 指南,了解背景、术语、指南和代码片段。
<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
的(称为排水沟),用于控制它们之间的空间。padding
然后在具有负边距的行上抵消这一点。这样,列中的所有内容在视觉上都在左侧对齐。 - 在网格布局中,内容必须放在列中,并且只有列可以是行的直接子级。
- 感谢 flexbox,没有指定的网格列
width
将自动布局为等宽列。例如,四个实例.col-sm
将自动从小断点开始宽 25% 及以上。有关更多示例,请参阅自动布局列部分。 - 列类表示每行可能有 12 个列中您希望使用的列数。所以,如果你想要三个等宽的列,你可以使用
.col-4
. - Column
width
是按百分比设置的,所以它们总是相对于它们的父元素是流动的和大小的。 - 列具有水平
padding
以在各个列之间创建装订线,但是,您可以margin
从行和padding
列.no-gutters
中删除.row
. - 为了使网格响应,有五个网格断点,每个响应断点一个:所有断点(特小)、小、中、大和特大。
- 网格断点基于最小宽度媒体查询,这意味着它们适用于该断点及其上方的所有断点(例如,
.col-sm-4
适用于小型、中型、大型和超大型设备,但不适用于第一个xs
断点)。 - 您可以使用预定义的网格类(如
.col-4
)或Sass mixins来进行更多语义标记。
请注意flexbox的限制和错误,例如无法将某些 HTML 元素用作 flex 容器。
Bootstrap 使用em
s 或rem
s 来定义大多数大小,而px
s 用于网格断点和容器宽度。这是因为视口宽度以像素为单位,不随字体大小而变化。
通过方便的表格了解 Bootstrap 网格系统的各个方面如何跨多个设备工作。
超小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大 ≥1200px |
|
---|---|---|---|---|---|
最大容器宽度 | 无(自动) | 540像素 | 720像素 | 960像素 | 1140像素 |
类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# 列数 | 12 | ||||
天沟宽度 | 30 像素(每列各 15 像素) | ||||
可嵌套 | 是的 | ||||
列排序 | 是的 |
利用特定于断点的列类来轻松调整列大小,而无需像.col-sm-6
.
例如,这里有两个网格布局适用于每个设备和视口,从xs
到xl
. 为您需要的每个断点添加任意数量的无单位类,并且每列的宽度都相同。
<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>
等宽的列可以分成多行,但是有一个Safari flexbox 错误,在没有明确的flex-basis
或border
. 旧版浏览器有一些变通方法,但如果您是最新版本,则不需要它们。
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
flexbox 网格列的自动布局还意味着您可以设置一列的宽度并让同级列自动调整其大小。您可以使用预定义的网格类(如下所示)、网格混合或内联宽度。请注意,无论中心列的宽度如何,其他列都会调整大小。
<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
类根据其内容的自然宽度来调整列的大小。
<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>
.w-100
通过在您希望列换行的位置插入一个新行来创建跨多行的等宽列。.w-100
通过与一些响应式显示实用程序混合来使休息时间响应。
<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>
Bootstrap 的网格包括五层预定义类,用于构建复杂的响应式布局。在您认为合适的超小型、小型、中型、大型或超大型设备上自定义列的大小。
对于从最小设备到最大设备都相同的网格,请使用.col
和.col-*
类。当你需要一个特别大小的列时,指定一个编号的类;否则,请随意坚持.col
。
<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>
使用一组.col-sm-*
类,您可以创建一个基本的网格系统,该系统开始堆叠,然后在小断点 ( sm
) 处变为水平。
<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>
不希望您的列简单地堆叠在某些网格层中?根据需要为每一层使用不同类的组合。请参阅下面的示例,以更好地了解它是如何工作的。
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .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>
使用 flexbox 对齐实用程序来垂直和水平对齐列。
<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>
<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>
<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
. 这会从所有直接子列中删除负数margin
s.row
和水平线。padding
这是创建这些样式的源代码。请注意,列覆盖的范围仅限于第一个子列,并通过属性选择器定位。虽然这会生成更具体的选择器,但仍可以使用间距实用程序进一步自定义列填充。
需要边缘到边缘的设计?删除父级.container
或.container-fluid
.
在实践中,它看起来是这样的。请注意,您可以继续将其与所有其他预定义的网格类(包括列宽、响应层、重新排序等)一起使用。
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
如果单行中放置了超过 12 列,则每组额外的列将作为一个单元换行。
由于 9 + 4 = 13 > 12,这个 4 列宽的 div 作为一个连续单元被换行到一个新行上。
后续列沿新行继续。
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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>
在 flexbox 中将列换行需要一个小技巧:width: 100%
在您想要将列换行的任何位置添加一个元素。通常这是通过多个.row
s 来完成的,但并不是每个实现方法都可以解决这个问题。
<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 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>
使用.order-
类来控制内容的视觉顺序。这些类是响应式的,因此您可以设置order
断点(例如,.order-1.order-md-2
)。包括对所有五个网格层1
的支持。12
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
还有响应式.order-first
和.order-last
类分别通过应用和( )来改变order
元素的属性。这些类也可以根据需要与编号的类混合。order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
您可以通过两种方式偏移网格列:我们的响应.offset-
式网格类和我们的边距实用程序。网格类的大小与列匹配,而边距对于偏移宽度可变的快速布局更有用。
使用类将列向右移动.offset-md-*
。这些类逐列增加一列的左边距*
。例如,.offset-md-4
移动.col-md-4
四列。
<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 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>
随着 v4 中向 flexbox 的迁移,您可以使用边距实用程序,例如.mr-auto
强制兄弟列彼此远离。
<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>
要使用默认网格嵌套您的内容,请在现有列中添加一.row
组新列。嵌套行应包括一组不超过 12 列的列(不需要使用所有 12 个可用列)。.col-sm-*
.col-sm-*
<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>
使用 Bootstrap 的 Sass 源文件时,您可以选择使用 Sass 变量和 mixin 来创建自定义、语义和响应式页面布局。我们预定义的网格类使用这些相同的变量和 mixin 来提供一整套现成的类,以实现快速响应的布局。
变量和映射确定列数、装订线宽度和开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类,以及下面列出的自定义 mixins。
Mixin 与网格变量结合使用,为各个网格列生成语义 CSS。
您可以将变量修改为您自己的自定义值,或者仅使用带有默认值的 mixin。这是一个使用默认设置创建两列布局的示例,其间有间隙。
<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
允许特定于断点的宽度均匀分布在列间距中padding-left
。padding-right
除了列本身之外,您还可以自定义网格层的数量。如果您只想要四个网格层,您可以将$grid-breakpoints
and更新为$container-max-widths
如下内容:
在对 Sass 变量或映射进行任何更改时,您需要保存更改并重新编译。这样做将输出一组全新的预定义网格类,用于列宽、偏移和排序。响应式可见性实用程序也将更新为使用自定义断点。确保在px
(not rem
, em
, or %
) 中设置网格值。