Bootstrap Grid System Does Not Work On All Devices Size
Solution 1:
I think I accomplished what you are looking for.
I edited your example. You can take a look here.
I got rid of the padding bootstrap adds to the columns so everthing should fit on the screen even on smaller resolutions. You should take a look at your center column. You could try adding a min-height so it should behave normal on lower screen resolutions.
Also I changed the first column to an offset. Take a look at the bootstrap docs.
Technically you can get rid of the last column. You don't have to add up to exact 12 columns. You should think of it as max. 12 columns. With an column offset of 1 und the following 10 columns you are good to go.
Instead of
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
You can go with
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
You don't need to set everything to 1.0 you can simply set user-scalable=no and remove ´minimum-scale=1.0´
Solution 2:
In bootstrap there are four different "grid-sizes". The only one you use is "xs" what means <576px.
If you want to use this grid in every sizes, you have to add "col-sm-?", "col-md-?", "col-lg-?" and "col-xl-?".
Here you can read how the grid-system in bootstrap work:
https://v4-alpha.getbootstrap.com/layout/grid/
I think your problem at this point is content which is bigger than its parent. For the col-xs-1 you do have round about 27px on an iPhone 5. If your content in this div is bigger than 27px it will bigger your parent-div (col-xs-1) and there isnt enough space for 12 columns anymore. (content could be text, too!)
To avoid that it will get bigger, you could use overflow:hidden; in your style. This will cut the overflow to the size of your parent-div.
Post a Comment for "Bootstrap Grid System Does Not Work On All Devices Size"