Bootstrap 4 网格系统

• Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
• Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动排列

网格类

Bootstrap 4 网格系统有以下5个类

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

网格系统规则

Bootstrap网格系统规则：

• 网格每一行需要放在.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，这样就可以自动设置一些外边距与内边距
• 使用行来创建水平的列组
• 内容需要放置在列中，并且只有列可以是行的直接子节点
• 预定义的类如.row和.col-sm-4可用于快速制作网格布局
• 列通过填充创建列内容之间的间隙
• 网格列是通过跨越指定的12个列来创建

网格基本结构

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
 
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>