A method to solve the blank on the right side of the bootstrap on the mobile phone

A recent project front desk use Bootstrap.css + angularjs, background only processing data (with PHP, processing results directly json_encode ($arr), very cool). The simulator has been tested very well in chrome and has not been tested for real machines. When finished, to the phone test silly, left and right sliding page, unexpectedly appeared a blank vertical bar (as shown). The judgment is caused by the length of the Margin-right setting, check the CSS, and there is no related code. It seems that the problem has arisen in bootstrap. Although it does not affect the use of the program, but it feels very awkward, be sure to repair it. Here you will write a tutorial on bootstrap http://www.maiziedu.com/course/543/.

Check the page and discover that the page with the raster system does not appear this problem. Check the. Row related CSS and find that its margin is defined as follows:

. Row is generally used as a subordinate element of the container, as the ancestor element of the. Col-xx-xx. By the way, look at the CSS for. Container and CON-XX-XX:

1 2 3 4 5 6 7 8

. container{ Padding-left : 15px ; Padding-right : 15px ; } . col-xx-xx{ Padding-left : 15px ; Padding-right : 15px ; }

All elements of the container have a 15px distance from each other, and are very beautiful. COL-XX-XX also has an internal margin of 15px. This will not align with the. Contariner element (. col-xx-xx is 30px relative to. Container), so the first raster element element and the last raster element need to be set to {padding-left:0px;}, { padding-right:0px;}. This solves the alignment problem, but after setting, the width of each raster is the same, and the width of the displayed content has a 15px gap. So the genius of FB clever use of negative outside the box solution, not only the code implementation is simple, there is no grid display of the content of the inconsistency of the width of the problem.

Although the outer border of negative numbers is a good solution, the problem of blank borders (the pain points to be addressed in this article) is generated on the small screen (mobile). Custom Bootstrap solves this problem, but the simplest way to do this is to replicate the CSS.

1 2 3 4 5

/* need to be called after BOOTSTRAP.CSS */ /* 15px for iPhone Start */ . row{margin:0;} . COL-LG-1,. Col-lg-10,. Col-lg-11,. Col-lg-12,. Col-lg-2,. Col-lg-3,. Col-lg-4,. Col-lg-5,. Col-lg-6,. Col-lg-7,. Col-lg-8,. Col-lg-9,. COL-MD-1,. COL-MD-10,. COL-MD-11,. COL-MD-12,. COL-MD-2,. COL-MD-3,. COL-MD-4,. COL-MD-5,. COL-MD-6,. COL-MD-7,. COL-MD-8,. COL-MD-9,. Col-sm-1,. Col-sm-10,. Col-sm-11,. Col-sm-12,. Col-sm-2,. Col-sm-3,. Col-sm-4,. Col-sm-5,. Col-sm-6,. Col-sm-7,. Col-sm-8,. Col-sm-9,. Col-xs-1,. Col-xs-10,. Col-xs-11,. Col-xs-12,. Col-xs-2,. Col-xs-3,. Col-xs-4,. Col-xs-5,. Col-xs-6,. Col-xs-7,. Col-xs-8,. Col-xs-9{padding:0;} /* 15px for iPhone over */

Successfully resolved, because the grid has no padding, the width of each fence is consistent, the width of the displayed content is consistent, and the elements of the Contrainer can be aligned (note: This is also a serious consequence, that is, the contents of each grid are linked together, The internal grid is redefined with the inner margin and the content centered to resolve).

Original from: Miao Qiyuan 's Blog

A way to fix bootstrap on the right side of the mobile phone's slide