tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算

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 的设置width: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-width:30px; 的值即可(想再详细具体一点,精确到每个不同分辨率的设备的gutter请参照http://v3.bootcss.com/css/ (侧边栏less mixin和变量栏))

然后 运行 grunt dist 就能在dist文件夹下取编译后的版本了.