bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题
出现的情况时
1 <div class="row" > <!--row a--> 2 <div class="col-xs-12 col-lg-6 col-lg-offset-3"> 3 <div class="row"> <!-- row b--> 4 <div class="col-xs-12"> 5 ... 6 </div> 7 </div> <!--row b--> 8 </div> 9 </div> <!-- row a -->
此时rowb的宽度计算会出现bug 在手机屏幕上将溢出
解决方案很简单 对row a设置样式overflow:hidden;(事先声明,这种解决方式有细微缺陷,但是基本不影响,而且简单实用)
此时对rowb 的设置100%; (在浏览器f12的盒子模型里可以看到width确实是对的(与父元素的width保持一致),但给它一个边框会发现视觉上真实的宽度是明显不够的(和父元素的width不等,非常诡异))
或者给rowb加一个父级元素container都是错误的做法,(此时手机屏幕上的不再溢出,在大屏幕上将会溢出)
为什么会有这个问题,可以去f12看row和col的盒子模型,因为bootstrap的col 默认有gutter(即col有左右的padding分别15px)
如果觉得这种默认不好,我们可以自己制定规则覆盖默认
定义样式如下
1 .row.no_gutter [class^="col-"],.row.no_gutter [class*="col-"]{ 2 padding-right:0px; 3 padding-left:0px; 4 }
然后需要嵌套列时,只需要将此嵌套的行加一个样式类就ok了,like this:
1 <div class="row" > <!--row a--> 2 <div class="col-xs-12 col-lg-6 col-lg-offset-3"> 3 <div class="row no_gutter"> <!-- row b--> 4 <div class="col-xs-12"> 5 ... 6 </div> 7 </div> < ！-- row b is end --> 8 </div> 9 </div> <!-- row a is end -->
或者也可以去改bootstrap源码,对于专业的前端工程师来说,
毫无疑问本地是有一套比如npm-bower-grunt的编译环境的,
此时 运行 bower install bootstrap
然后在项目下 运行 npm install
然后在其less文件夹下找variables.less文件 更改 @grid-gutter-30px; 的值即可(想再详细具体一点,精确到每个不同分辨率的设备的gutter请参照http://v3.bootcss.com/css/ (侧边栏less mixin和变量栏))
然后 运行 grunt dist 就能在dist文件夹下取编译后的版本了.