本篇文章就给大家带来bootstrap的栅格系统是什么？栅格系统详解，让大家了解bootstrap栅格系统、栅格参数是什么，列偏移、列嵌套怎么设置。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！
什么是栅格系统？
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中
注意：
”行（row）“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。
我是文本
我是文本
我是文本
我是文本
表示一个 p 占3列。
栅格参数
总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
.col-xs-.col-sm-.col-md-.col-lg-
12
自动~62px~81px~97px
30px （每列左右均有 15px）
是
是
是
现在有一个需求：
如果是大屏幕，一行显示6列
如果是中屏幕，一行显示4列
如果是小屏幕，一行显示3列
如果是超小屏幕，一行显2列
我是文本
我是文本
我是文本
我是文本
我是文本
我是文本
列偏移
.col-lg-offset-*
” * ” 偏移几个位置
我是文本
在大屏幕的页面下偏移两个格子
列嵌套
我是文本
我是文本
在列里面再进行一次嵌套，会把列的大小平均分成12份再计算。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
以上就是Bootstrap的栅格系统是什么？栅格系统详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547190.html
微信扫一扫 
支付宝扫一扫 
