Bootstrap.css the reason for the blank on the right side when the mobile phone is sliding and the solution _javascript skill

A recent project front desk used Bootstrap.css + ANGULARJS, background only processing data (PHP, processing results directly json_encode ($arr), very cool). The chrome simulator has been tested perfectly, without a real-machine test. Finished, to the mobile phone test silly, left and right when the page, unexpectedly appeared a blank vertical bar (as shown in the following picture). Judge is the length of the margin-right set, check the CSS, and no related code. It seems that the problem appears in the bootstrap. Although it does not affect the use of the program, but feel very awkward, be sure to fix it.

Check the page to see if this problem occurs with a grid-system page. Check the. Row-related CSS and find its margin definition as follows:

. row{
margin-left:-15px;
margin-right:-15px;
}

. Row is generally used as a subordinate element of the container, as the ancestor of the. Col-xx-xx. By the way, check out the container and con-xx-xx CSS:

. 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 and are very attractive. COL-XX-XX also set the inner margin of 15px. This is not aligned with the. Contariner element (. col-xx-xx is 30px relative to. Container), so the first grid element element and the last grid element need to be set to {padding-left:0px;}, { padding-right:0px}. This solves the problem of alignment, but after setting, the width of the displayed content has a 15px difference, although the width of each grid is consistent. So the FB genius cleverly adopted a negative outside the box solution, not only the code implementation is simple, there is no grid display of the content of the inconsistent width of the problem.

Although a negative outline of this solution is good, but the small screen (moving side) will produce a blank border problem (this article to solve the pain point). Custom Bootstrap solves the problem, but the easiest way to do this is to copy the relevant CSS.

/* Need to call
///////////* 15px for iPhone Start/* row{margin:0 after Bootstrap.css
. 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 is not padding, the width of each fence is the same, the width of the display is consistent, and the elements of the Contrainer can be aligned (note: The consequence is also very serious, is that the contents of each grid are connected together, The inner grid is redefined with the inner margin and center of the content can be resolved.

The above mentioned is small set to introduce the BOOTSTRAP.CSS in the mobile phone side of the slide on the right side of the reason and the solution, I hope to help!