Tips Front End bootstrap nested rows nested columns overflow width incorrect rasterization system calculation

Bootstrap sometimes a singular row width is not a problem when nesting columns
When a situation arises

1 <Divclass= "Row" >  <!--Row A -2     <Divclass= "col-xs-12 col-lg-6 col-lg-offset-3">3         <Divclass= "Row"> <!--Row B -4             <Divclass= "Col-xs-12">5                 ...6             </Div>7         </Div>      <!--Row B -8     </Div>9 </Div>    <!--Row A -

At this point the width of the ROWB calculation will appear bug on the phone screen will overflow
The solution is simple to set the style of row a overflow:hidden; (in advance, this solution has minor flaws, but it's basically not, and it's simple and practical)
At this time the setting of the ROWB width:100%; (In the box model of the browser F12, you can see that width is really right (consistent with the width of the parent element), but giving it a border will see that the visual true width is obviously not enough (and the parent element is not as wide as width, very weird))
Or give Rowb a parent element container is wrong, (at this time the phone screen is no longer overflow, on the big screen will overflow)

Why this problem, you can go to F12 to see the box model of row and Col, because Bootstrap col default has gutter (that is, Col has about padding respectively 15px)
If you feel that this default is not good, we can make our own rules override the default
Define the style 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 the columns, just add the nested row to a style class and you're OK, like this:

1 <Divclass= "Row" >  <!--Row A -2     <Divclass= "col-xs-12 col-lg-6 col-lg-offset-3">3         <Divclass= "Row No_gutter"> <!--Row B -4             <Divclass= "Col-xs-12">5                 ...6             </Div>7         </Div>         <! --  Row B is end-->8     </Div>9 </Div>  <!--row A is end -

Or can also go to change bootstrap source code, for professional front-end engineers,
There is no doubt that local is a set of environment such as Npm-bower-grunt,
Run Bower Install bootstrap at this time
Then run npm install under the project

Then look for the variables.less file under its less folder to change the value of @grid-Gutter-width:30px; Refer to http://v3.bootcss.com/css/(sidebar less mixin and variable bar) for the gutter of devices that are accurate to each of the different resolutions

Then run Grunt Dist to get the compiled version under the Dist folder.

Tips Front End bootstrap nested rows nested columns overflow width incorrect rasterization system calculation