A recent project front desk uses bootstrap.css + angularjs, and the background only processes data (using php, the processing result is directly json_encode($arr), which is very cool). The simulation machine tests on Chrome have been perfect, and there is no real machine test. After completing it, I was stunned when I was testing on the phone. When I swiped the page left and right, a blank vertical bar appeared (as shown in the figure below). It is determined that it is due to the length set by margin-right. Check css, and there is no relevant code. It seems that the problem occurs in bootstrap. Although it does not affect the use of the program, it feels very awkward and you must fix it.
Check the page and find that this problem will occur only if the page using the grid system is used. Check the .row-related css and find that its margin definition is as follows:
.row{margin-left:-15px;margin-right:-15px;}.row is generally used as the lower element of the container and as the upper element of .col-xx-xx. By the way, check out the css of .container and con-xx-xx:
.container{padding-left:15px;padding-right:15px;}.col-xx-xx{padding-left:15px;padding-right:15px;}The inner margins of all elements of .container have a distance of 15px, which looks very beautiful, and the inner margins of .col-xx-xx also sets 15px. This will not be aligned with the elements of the .contariner (the distance between .col-xx-xx and .container is 30px), so the first raster element element and the last raster element need to be set to {padding-left:0px;} and {padding-right:0px;} respectively. This solves the alignment problem, but after setting, although the width of each grid is the same, the width of the displayed content is 15px. So the geniuses of FB cleverly adopted the solution of negative outer borders. Not only did the code implementation be simple, but there was no problem of inconsistent width of the content displayed in each raster.
Although the solution of negative outer borders is good, it will cause blank borders on small screens (mobile terminals) (the pain point to be solved in this article). Customizing bootstrap solves this problem, but it's too troublesome. The easiest way is to rewrite the relevant css.
/* Need to call *//* Fuck 15px for iPhone Start after bootstrap.css */.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;}/* Fuck 15px for iPhone Over */It was successfully solved because the grid has no padding, the width of each fence is the same, the width of the displayed content is also the same, and it can be aligned with the elements of the container (note: this consequence is also very serious, that is, the content between each grid is connected, and the internal grid can be solved by redefining the inner margin and centering the content).
The above is the reasons and solutions for the blank space on the right when BootStrap.css is swiped on the mobile phone. I hope it will be helpful to everyone!