借助十二列系统,五个默认响应层,Sass 变量和 mixins 以及数十个预定义类,使用我们强大的移动优先 flexbox 栅格来构建各种形状和大小的布局。
Bootstrap 的栅格系统使用一系列容器,行和列来布局和对齐内容。 它是用 flexbox 构建的,并且完全响应。 下面是一个示例,并深入了解栅格如何组合在一起。
没听说过 flexbox? 在这里看看什么是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
的中心位置。
理解它的工作原理:
请注意 flexbox 存在的限制和 bug, 例如 无法将某些 HTML 元素用作 Flex 容器.
虽然 Bootstrap 使用 ems 或 rems 来定义大多数大小,但 px 用于栅格断点和容器宽度。 这是因为 viewport 宽度以像素为单位,并且不随字体大小而变化。
你可以通过改变当前浏览器的大小来了解 Bootstrap 栅格系统的各个方面如何通过在多个设备上工作(因为本文档就是基于 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
。
例如,这里有两个适用于每个设备和 viewport 的栅格布局,从 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 删除。 这将从 .row 中删除负边距,并从所有直接子列中删除水平边距。
这是创建这些样式的源代码。 请注意,列覆盖仅限于第一个子列,并通过属性选择器进行定位。 虽然这会生成更具体的选择器,但仍可以使用间距工具进一步自定义列填充。
采用了无边框地设计方案? 只需要把上层的 .container
类 或 .container-fluid
类移除。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
在实践中,这是它的外观。 请注意,你可以继续将其与所有其他预定义栅格类(包括列宽,响应层,重新排序等)一起使用。
<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列,则每组额外列将作为一个单元包裹到新行上。
<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 中的新行需要一个小的 hack:添加宽度为100%的元素,无论你是否想将列包装到新行。 通常,这是通过多个 .rows 完成的,但并非每种实现方法都可以解释这一点。
<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-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- 栅格类和我们的margin工具。 栅格类的大小可以匹配列,而边距对于偏移宽度可变的快速布局更有用。
使用 .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>
你可以使用诸如 .mr-auto
之类的margin 工具来强制兄弟列彼此远离。
<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
和一组 .col-sm-*
现有 .col-sm-*
列中的列。 嵌套行应包含一组最多可添加12个或更少的列(不要求你使用所有12个可用列)。
<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 变量和 mixins 来创建自定义,语义和响应式页面布局。 我们的预定义栅格类使用这些相同的变量和 mixins 来提供一整套即用型类,以实现快速响应式布局。
变量和映射确定列的数量,装订线宽度以及开始浮动列的媒体查询点。 我们使用它们来生成上面记录的预定义栅格类,以及下面列出的自定义混合类。
$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 与栅格变量结合使用,为各个栅格列生成语义 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);
}
}
<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
中设置栅格值(不是 rem
,em
或 %
)。