Bootstrap栅格网格系统
【摘要】 Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为12列。而且最多为十二列，确保每一行中列的总和等于或小于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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）