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

时间：2022-09-27 04:09:57

bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题
出现的情况时

 <div class="row" >  <!--row a-->

     <div class="col-xs-12 col-lg-6 col-lg-offset-3">

         <div class="row"> <!-- row b-->

             <div class="col-xs-12">

                 ...

             </div>

         </div>      <!--row b-->

     </div>

 </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)
如果觉得这种默认不好,我们可以自己制定规则覆盖默认
定义样式如下

 .row.no_gutter [class^="col-"],.row.no_gutter [class*="col-"]{

     padding-right:0px;

     padding-left:0px;

 }

然后需要嵌套列时,只需要将此嵌套的行加一个样式类就ok了,like this:

 <div class="row" >  <!--row a-->

     <div class="col-xs-12 col-lg-6 col-lg-offset-3">

         <div class="row no_gutter"> <!-- row b-->

             <div class="col-xs-12">

                 ...

             </div>

         </div>         < ！--  row b is end -->

     </div>

 </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文件夹下取编译后的版本了.

相关文章