栅格系统是在上一节中提到的布局 container
里布局的,内容必须被放到 columns
中,只有 columns
可以是rows
的直接子元素。
1、栅格选项
对于不同大小的屏幕,该如何使用什么样的预置columns
类了?见下图:
例如:如果屏幕小于576px的话,使用col
类作为列类,因为网格布局一行被分为12等分,如果想定义当前列占多少份数的话,可以在col
后带-
,然后紧跟一个1到12之间的数字即可。
2、自动布局列
2.1、等宽
例如,下面两个网格布局,适用于每个设备和 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>
效果如图:
2.2、等宽多行
通过在需要分隔为新行的地方插入 .w-100
,创建跨越多行的等宽列。
Safari有一个flexbox
bug,在没有显示的flex基础或边界的情况下,它无法工作。对于较老的浏览器版本有一些变通的方法,但是如果您的目标浏览器不属于有bug的版本,那么它们就没有必要了。
<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>
效果如图:

2.3、设置一个列宽
flexbox网格列的自动布局也意味着你可以设置一个列的宽度,然后让兄弟列围绕它自动调整大小。您可以使用预定义的网格类、网格 mixin 或内联宽度。
注意:其他列的大小将随着中间列的宽度而改变。
<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>
效果如图:
2.4、可变宽度的内容
根据列内容的自然宽度来使用 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>
效果如图:
3、响应类
3.1、所有断点
对于从最小设备到最大设备都相同的网格,使用.col
和.col-
类。当需要特定大小的列时,使用指定数的类,否则使用.col
。
<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>
效果如图:
3.2、向水平方向堆叠
使用一组.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>
效果如图:
3.3、混合搭配
根据需要,为每一层使用不同类的组合。
<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>
效果如图:
3.4、Gutters
gutters可以通过特定于断点的padding和负margin实用程序类进行响应性调整。要更改给定行的gutters,请对·.row·上的负边距实用程序和·.cols·上的匹配填充实用程序进行配对。也可能需要使用匹配填充实用程序调整·.container·或·.container-fluid·父级,以避免不必要的溢出。
<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>
效果如图:
3.5、先行后列
使用响应式的.row-cols-*
类来快速设置最佳呈现内容和布局的列数。普通的.col-*
类应用于单独的列,而行列类被设置在父行上作为快捷方式。
<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>
效果如图:
<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>
效果如图:
<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>
效果如图:
4、对齐
使用flexbox
对齐工具来垂直和水平对齐列。当伸缩容器具有以下最小高度时,Internet Export 10-11不能支持伸缩项的垂直对齐。
4.1、垂直对齐
父元素上的row
的预定义类
<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>
效果如图:
子元素的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>
效果如图:
4.2、水平对齐
<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>
效果如图:
4.3、No gutters
在我们预定义的网格类中,列之间的 gutters
可以用 no-gutters
移除,这将删除.row
的负边距和所有紧邻子列的水平padding
。
<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>
效果如图:
4.4、Column wrapping
如果在一个行中放置超过12列,每一组额外的列将作为一个单元,包装到一个新的行。
<div class="container">
<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>
</div>
效果如图:
4.5、Column breaks
在flexbox
中,将列换行需要一个小技巧:在你想换行的地方添加一个width: 100%
的元素。通常是通过多个 .rows
来完成的,但并不是每个实现方法都可以解释这一点。
<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>
效果如图:
您也可以使用我们的响应式显示工具在特定的断点应用此中断。
<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>
效果如图:
5、重排序
5.1、排序类
使用.order-
类来控制内容的视觉顺序。这些类是响应式的,因此您可以通过断点设置顺序(例如:.order-1
,.order-md-2
)。包括对所有5个网格层1到12的支持。
<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: 1
和order:13
(order: $columns + 1)来更改元素的顺序。这些类也可以根据需要与编号的.order-*
类混合。
<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>
效果如图:
5.2、列偏移
可以使用两种方法来偏移网格列:我们的响应式 .offset- grid
类和我们的margin
。网格的大小与列匹配,而边距对于偏移宽度可变的快速布局更有用。
5.2.1、偏移类
使用.offset-md-*
类将列移动到右边。。这些类将一列的左边距增加*列。例如,.offset-md-4
将.col-md-4
移到4列上。
<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>
效果如图:
除了在响应断点处清除列外,还可能需要重置偏移量。
<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>
效果如图:
5.2.2、边际效应
随着v4中flexbox的移动,你可以使用像.mr-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>
效果如图:
6、嵌套
要将内容与默认网格嵌套,请在现有的.col-sm-*
列中添加一个新的.row
和一组.col-sm-*
列。嵌套行应该包括一组加起来不超过12的列(不要求使用所有12个可用列)。
<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>
效果如图:
7、Sass 混入
当使用Bootstrap的源Sass文件时,你可以选择使用Sass变量和mixins来创建自定义的、语义的和响应式的页面布局。我们预定义的网格类使用这些相同的变量和mixins来为快速响应布局提供一整套现成的类。
7.1、变量
变量和映射确定列数、gutter宽度和开始浮动列的媒体查询点。我们使用它们来生成上面文档中预定义的网格类,以及下面列出的自定义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
);
7.2、混入
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);
7.3、使用案例
您可以将变量修改为您自己的自定义值,或者只使用mixins的默认值。下面是一个使用默认设置创建两列之间有间隙的布局的示例。
.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);
}
}
<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>
效果如图:
8、自定义网格
使用我们内置的网格Sass变量和映射,可以完全定制预定义的网格类。更改层数、媒体查询维度和容器宽度,然后重新编译。
8.1、Columns and gutters
网格列的数量可以通过Sass变量修改。$grid-columns
用于生成每个独立列的宽度(以百分比为单位),而$grid-gutter-width
设置列水槽的宽度。
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
8.2、网格层
除了列本身之外,您还可以定制网格层的数量。如果只想要四个网格层,则需要将$grid-breakpoints
和$container-max-width
更新为如下内容
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
当对Sass变量或映射进行任何更改时,您将需要保存更改并重新编译。这样做将输出一组全新的预定义网格类,用于列宽度、偏移量和排序。响应性可见性工具也将被更新以使用自定义断点。确保在px中设置网格值(不是rem, em,或%)。
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!