携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

列组合和列偏移

Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为12列。而且最多为十二列，确保每一行中列的总和等于或小于12，如果你设置的列数超过十二列，超出部分会自动换行到下一行，下面根据实例详细介绍。

Bootstrap网格系统分为6类：

.col- 针对所有设备。
.col-sm- 平板 - 屏幕宽度等于或大于 576px。
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
.col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
.col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

我们经常使用的还是.col-md桌面显示器

（1）第一种就是一行十二个格子刚好占满，分为三列，每一列是四个格子。
（2）第二种是没有完全占满十二个格子，没有占满的话没有任何影响，只要确保一行不超过12个格子就行。
（3）第三种就是一行的格子超过了12个，第一列是4，第二列是6，第三列是4，加起来就是14超过了12，第三列不会将剩下的4个格子补齐，而是将第三列所有的格子全部移到下一行。
（4）第四种就是列偏移，第二列和第一列之间偏移了一个格子，直接就会空一个格子。
（5）第五种就是只设置其中的某一列宽度，其余列会均分剩下的格子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-md-4" style="background-color: aquamarine">4</div>
    <div class="col-md-4" style="background-color: aqua">4</div>
    <div class="col-md-4" style="background-color: blanchedalmond">4</div>
</div>
    <hr>
    <div class="row">
        <div class="col-md-2" style="background-color: aquamarine">2</div>
        <div class="col-md-3" style="background-color: aqua">3</div>
        <div class="col-md-4" style="background-color: blanchedalmond">4</div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4" style="background-color: aquamarine">4</div>
        <div class="col-md-6" style="background-color: aqua">6</div>
        <div class="col-md-4" style="background-color: blanchedalmond">4</div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-2" style="background-color: aquamarine">2</div>
        <div class="col-md-2 offset-md-2" style="background-color: aqua">2</div>
        <div class="col-md-4 offset-md-1" style="background-color: blanchedalmond">4</div>
    </div>
    <hr>
    <div class="row">
        <div class="col" style="background-color: aquamarine">2</div>
        <div class="col-2" style="background-color: aqua">2</div>
        <div class="col" style="background-color: blanchedalmond">4</div>
    </div>
</div>
</body>
</html>

列排序

列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。往前就是pull，往后就是push。这个在bootstrap4和5没有这个属性，只有bootstrap3可以实现。

   <div class="row">
        <div class="col-md-2 col-md-push-8" style="background-color: aquamarine">2</div>
        <div class="col-md-2" style="background-color: aqua">2</div>
        <div class="col-md-2" style="background-color: blanchedalmond">2</div>
    </div>

列嵌套

列嵌套就是你可以在一个列中添加n个容器，然后在这个容器中插入新的列。

  <div class="row">
        <div class="col-md-4">
            <div class="row">
            <div class="col-md-4" style="background-color: coral">4</div>
            <div class="col-md-4" style="background-color: chartreuse">4</div>
            <div class="col-md-4" style="background-color: darkcyan">4</div>
            </div>
        </div>
        <div class="col-md-4">
        <div class="row">
            <div class="col-md-2" style="background-color: aqua">2</div>
            <div class="col-md-2" style="background-color: blanchedalmond">2</div>
        </div>
        </div>
        <div class="col-md-4" style="background-color: beige">4</div>
    </div>

Bootstrap栅格网格系统

列组合和列偏移

列排序

列嵌套