Tips frontend bootstrap nested row nested column overflow width incorrect raster system calculation, tipsbootstrap

Tips frontend bootstrap nested row nested column overflow width incorrect raster system calculation, tipsbootstrap

Bootstrap sometimes has a strange row width error when nesting columns.
When

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 -->

At this time, the rowb width calculation will cause a bug that will overflow on the mobile phone screen.
The solution is simple and easy to set overflow: hidden; for row a (this solution has minor flaws, but is basically unaffected, and is simple and practical)
In this case, the width of rowb is set to 100%. (In The Box Model of the browser f12, we can see that width is true (consistent with the width of the parent element ), however, if you give it a border, you will find that the actual width is obviously not enough (unlike the width of the parent element, which is very strange ))
Or adding a parent-level element container to rowb is incorrect. (in this case, the mobile phone screen will no longer overflow and will overflow on the screen)

Why is this problem? You can go to f12 to check the box model of row and col, because the col of bootstrap has gutter by default (that is, col has 15px padding respectively)
If we think this default is not good, we can set our own rules to overwrite the default
The style is defined as follows:

1 .row.no_gutter [class^="col-"],.row.no_gutter [class*="col-"]{2     padding-right:0px;3     padding-left:0px;4 }

Then, when you need to nest columns, you only need to add a style class to the nested row. 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 -->

You can also modify the bootstrap Source Code. For professional front-end engineers,
There is no doubt that there is a local compilation environment such as npm-bower-grunt,
Run bower install bootstrap
Then run npm install in the project

Find variables in its less folder. change the value of @ grid-gutter-width: 30px; in the less file (to be more specific, refer to the http://v3.bootcss.com/css/ (sidebar less mixin and variable bar) for gutter precise to each device with different resolutions ))

Then run grunt dist to get the compiled version in the dist folder.