本文摘自PHP中文网,作者藏色散人,侵删。
bootstrap只能默认12列是因为12是数字“1、2、3、4、6”的最小公倍数,所以12列栅格系统相对较灵活,并且支持将一行分成1列、2列、3列、4列、6列。
本教程操作环境:Windows7系统、bootstrap3版,该方法适用于所有品牌电脑。
推荐:《bootstrap视频教程》
为什么Bootstrap要默认12列?
今天被问了一个问题:”有没有想过为什么Bootstrap要默认是12列?“
呃,好吧,用了Bootstrap一段时间,的确没想过为什么要默认是12列,隐隐约约觉得是因为布局比较方便,常见的分2块,3块,4块,都可以方便分完。
既然有假设,那还是要求证一下。
谷歌上一阵搜索。
1 |
|
大致意思就是原来是16列的,后来改成了12列,是为了更容易可以排出三列。
好,那么问题来了,为什么之前是设计16列呢?
继续谷歌。
1 |
|
这个是Bootstrap的github bug列表中2011年的一段讨论,题目是问为什么用16列代替了24列。原来16列之前还有24列。大概是说,16列是开发和设计人员的首选,但是12列或者是24列可以更灵活。其中说到就是奇数列的布局更常见,比如经常可以看到三列形式的布局。
这里的话,为什么说16列是开发和设计人员的首选,我并不清楚。但是后面说到三列布局更常见,的确是这样,比如CSDN的首页就是个三列形式的布局。用16列想分3:1或者3:2都不是很方便。
而12是1,2,3,4,6的最小公倍数,所以12列栅格系统相对较灵活,支持将一行分成1列,2列,3列,4列,6列。若是想要支持5列,那1,2,3,4,5的最小公倍数是60,而60这个数对于栅格系统来说显然太大了。
以上就是bootstrap 为什么只能默认12列的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《bootstrap》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者