简介
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
网格类
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
列与列间隔30px
布局
定义了几个类型的布局容器,会在相应设备上进行响应,如.container-md容易,在屏宽<768时会满屏不留margin和panding。
网格系统规则
Bootstrap4 网格系统规则:
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中,并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。
下表总结了 Bootstrap 网格系统如何在不同设备上工作的:
套用格式
必须套在container-fluid >row 中或container>row中
<div class="container-fluid">
<div class="row">
<div class="col"> </div>
</div>
</div>
等宽列
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
等宽响应式列
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
即屏幕宽度小于sm尺寸 576px 时,每列都是全宽,大于576px时,四列均分屏宽
多屏响应式列
<div class="row">
<div class="col-sm-3 col-md-6"> col-sm-3 col-md-6 </div>
<div class="col-sm-9 col-md-6"> col-sm-9 col-md-6 </div>
</div>
桌面设备的显示器>md768px上两个列的宽度各占 50%,如果在平板端>sm576且<md768则左边的宽度为 25%,右边的宽度为 75%, 在移动手机等小型设备上会堆叠全宽显示。
强制换行或间隔
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
w-25 w-50等可以分别嵌入一个25%和50%的空白区域,w-100强制块换行
指定其中一列宽度
<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 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>
row的 justify-content-md-center可以让块居中
屏宽>lg960时,左右两列各占2栅格,中间列由文字内容决定宽度
屏宽>md720且<lg960时,左右失限填满左右空间,中间由文字内容决定宽度
屏宽<md720时,三列失限占全宽,成为三行
行列限定
<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>
row-cols-2指定本row每行只能包括两个col。每个col也可以指定宽度,但总宽大于12时仍然会换行溢出。
垂直位置
<div class="row align-items-start">
<div class="row align-items-center">
<div class="row align-items-end">
......
<div class="col align-self-start">
<div class="col align-self-center">
<div class="col align-self-center">
使行内的col块在行中垂直位置定位。align-self控制col本身,align-items控制内部col
水平位置
<div class="row justify-content-start"> 内部col靠左
<div class="row justify-content-center">内部col居中
<div class="row justify-content-end">内部col靠右
<div class="row justify-content-around">内部col均分列,最边缘的col左右有空隙
<div class="row justify-content-between">内部col均分列,最边缘的col左右紧贴外边缘
列重新排序
<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-1的列会放在order-12前面
偏移
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
两个块中间会有一个col-md-4尺寸的空白,即第二个col左侧多了一个同等尺寸的margin-left
margin utilities
可以使用margin utilities 例如.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> //右侧留空,把下一个col挤到最右边
<div class="col-auto">.col-auto</div>
</div>
</div>
嵌套
<div class="row">
<div class="col-sm-9 bg-danger"> Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6 bg-dark"> Level 2: .col-8 .col-sm-6 </div>
<div class="col-4 col-sm-6 bg-info"> Level 2: .col-4 .col-sm-6 </div>
</div>
</div>
<div class="col-sm-3 bg-secondary"> Level 1: .col-sm-3 </div>
</div>
技巧
水平堆叠的技巧
为了节省空间使用一组.col-sm-*类,可以创建一个基本的网格系统,该系统屏宽<SM时变为水平。其它时候按列宽排列