🌸Author Echo Pan
栅格系统是Bootstrap提供的一套响应式、移动设备优先的布局系统。
栅格系统将容器自动分为12列，称为栅格。
在大屏幕（1200px以上）、中屏幕（992px-1200px）、小屏幕（768px-992px）、超小屏幕（<768px）上布局灵活改变。
.row）必须包含在容器.container（固定宽度）或.ccontainer-fluid（100%宽度）中.col-xx-n）必须包含在行中<div class="container">
<div class=row>
<div class="col-sm-4">主题1</div>
<div class="col-sm-4">主题2</div>
<div class="col-sm-4">主题3</div>
</div>
</div>
| 超小屏幕(<768px) | 小屏幕(≥768px) | (中等屏幕≥992px) | 大屏幕(≥1200px) | |
|---|---|---|---|---|
.container最大宽度 |
None(自动) | 750px | 970px | 1170px |
| 列前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
在屏幕宽度小于阈值时，列堆叠排列（竖直排列），达到阈值后变为水平排列。
使用.col-md-offset-*可以将列向右偏移*个列宽（实际是增加了左侧的margin）。