Bootstrap网格系统

Bootstrap 4包含了一个强大的移动优先的网格系统，它是基于一个12列的布局，有5种响应尺寸（对应不同的屏幕），支持Sass mixins自由调用，并结合自己预定义的CSS、JavaScript类，用来创建各种形状和尺寸的布局。
网格每一行都需要放在设置了.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，这样才可以自动设置一些外边距与内边距。

Bootstrap 3和Bootstrap 4最大的区别在于Bootstrap 4现在使用Flexbox（弹性盒子）而不是浮动。Flexbox的一大优势——没有指定宽度的网格列将自动设置为等宽与等高列。
虽然Bootstrap 4使用em或rem来定义大多数尺寸，但网格断点和容器宽度使用的是px。这是因为视口宽度以像素为单位，并且不随字体大小而变化。

Bootstrap 4的网格系统在各种屏幕和设备上的约定如下表所示:

image.png

网格如何设置

等宽列

<div class="row">
    <div class="col border py-3 bg-light">二分之一</div>
    <div class="col border py-3 bg-light">二分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
    <div class="col border py-3 bg-light">十二分之一</div>
</div>

image.png

设置一个列宽

<div class="row">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-7 border py-3 bg-success">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>
<div class="row">
    <div class="col-3 border py-3 bg-light">左</div>
    <div class="col border py-3 bg-light">中</div>
    <div class="col-1 border py-3 bg-light">右</div>
</div>
</body>

image.png

可变宽度内容

使用col-{breakpoint}-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。

<div class="row justify-content-md-center">
    <div class="col col-lg-2 border py-3 bg-light">左</div>
    <div class="col-md-auto border py-3 bg-light">中（在屏幕尺寸≥768px时，可根据内容自动调整列宽度）</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light">左</div>
    <div class="col-md-auto border py-3 bg-light">中（在屏幕尺寸≥768px时，可根据内容自动调整列宽度）</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>

image.png image.png

等宽多列

创建跨多个行的等宽列，方法是插入w-100通用样式类，将列拆分为新行。

<div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="w-100"></div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
</div>

image.png

网格多设备自适应

Bootstrap 4的网格系统包括特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大.col-xl-五种屏幕（设备）下的样式。

覆盖所有设备

<div class="row">
    <div class="col border py-3 bg-light">col</div>
    <div class="col border py-3 bg-light">col</div>
    <div class="col border py-3 bg-light">col</div>
    <div class="col border py-3 bg-light">col</div>
</div>
<div class="row">
    <div class="col-8 border py-3 bg-light">col-8</div>
    <div class="col-4 border py-3 bg-light">col-4</div>
</div>

image.png

多设备设置

<!--在小于md型的设备上显示为一个全宽列和一个半宽列，在大于等于md型设备上显示为一列，分别占8份和4份-->
<div class="row">
    <div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div>
</div>
<!--在任何类型的设备上，列的宽度都是占50%-->
<div class="row">
    <div class="col-6 border py-3 bg-light">.col-6</div>
    <div class="col-6 border py-3 bg-light">.col-6</div>
</div>

image.png image.png

一行超过网格12列

如果在一行中放置超过12列，则每组额外列将作为一个单元包裹到新行上。

<div class="row">
    <div class="col-9 py-3 border bg-light">.col-9</div>
    <div class="col-4 py-3 border bg-light">.col-4<br>因为9 + 4 = 13 >12，4列宽的div被包装到一个新行上，作为一个连续的单元。</div>
    <div class="col-6 py-3 border bg-light">.col-6<br>后续的列沿着新行继续排列。</div>
</div>

image.png

重排序

排列顺序

使用.order-*类选择符，可以对空间进行可视化排序，系统提供了.order-1到.order-12等12个级别的顺序，在主流浏览器和设备宽度上都能生效。

<div class="row">
    <div class="col order-12 py-3 border bg-light">
        order-12
    </div>
    <div class="col order-1 py-3 border bg-light">
        order-1
    </div>
    <div class="col order-6 py-3 border bg-light">
        order-6
    </div>
    <div class="col py-3 border bg-light">
        col
    </div>
</div>

image.png

可以使用.order-first快速更改一个顺序到最前面，使用.order-last更改一个顺序到最后面。

<div class="row">
    <div class="col order-last py-3 border bg-light">
        order-last
    </div>
    <div class="col py-3 border bg-light">
        col
    </div>
    <div class="col order-first py-3 border bg-light">
        order-first
    </div>
</div>

列偏移

在Bootstrap中可以使用两种方式进行列偏移。

1. 使用响应式的.offset-*类偏移方法。
2. 使用边距通用样式处理，它内置了诸如.ml-、.p-、.pt-*等实用工具。

偏移类
使用.offset-md-类可以使列向右偏移，通过定义的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

<div class="row">
    <div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
    <div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
</div>
<div class="row">
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 offset-md-4 py-3 border bg-light">.col-md-4 .offset-md-4</div>
</div>

image.png

使用margin类
在Bootstrap 4中，可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现水平隔离的效果。

.ml-auto, .mx-auto {
    margin-left: auto !important;
}

@media (min-width: 768px)
.ml-md-auto, .mx-md-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

<div class="row">
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
</div>
<div class="row">
    <div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
    <div class="col-auto mr-auto py-3 border bg-light">.col-auto .mr-auto</div>
    <div class="col-auto py-3 border bg-light">.col-auto</div>
</div>

image.png image.png

参考部分

Bootstrap从入门到项目实战
bootstrap4之栅格系统