这篇文章主要介绍Bootstrap的栅格系统有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为郫都企业提供专业的成都网站设计、网站建设，
郫都网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
什么是栅格系统？
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中
注意：
”行（row）“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。
我是文本
我是文本
我是文本
我是文本
表示一个 p 占3列。
栅格参数
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面显示器 (≥992px) | 大屏幕大桌面显示器 (≥1200px) |
|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C |
|---|
.container大宽度 | None （自动） | 750px | 970px | 1170px |
|---|
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
|---|
| 列（column）数 | 12 |
|---|
| 大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
|---|
| 槽（gutter）宽 | 30px （每列左右均有 15px） |
|---|
| 可嵌套 | 是 |
|---|
| 偏移（Offsets） | 是 |
|---|
| 列排序 | 是 |
|---|
现在有一个需求：
如果是大屏幕，一行显示6列
如果是中屏幕，一行显示4列
如果是小屏幕，一行显示3列
如果是超小屏幕，一行显2列
我是文本
我是文本
我是文本
我是文本
我是文本
我是文本
列偏移
.col-lg-offset-*
"*" 偏移几个位置
我是文本
在大屏幕的页面下偏移两个格子
列嵌套
我是文本
我是文本
在列里面再进行一次嵌套，会把列的大小平均分成12份再计算。
以上是“Bootstrap的栅格系统有什么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道！
文章名称：Bootstrap的栅格系统有什么用-创新互联
URL分享：
http://cdxtjz.cn/article/ceoged.html
