自举屏幕尺寸的困境？

Question

Bootstrap has 4 screen sizes md, sm, lg and xs .

I just found that these screen sizes or breakpoints change with resolution.

I marked in my screen the breakpoint of md with different resolutions and all were different.

Now, my question is how can we make sure the layout is what we want since the screen breakpoints seem to vary with screen resolutions and different devices have different screen resolution?

It would be easy if the sm, md, lg and xs breakpoints were same for all devices but this doesn't seem to be the case. I appreciate any help in solving this dilemma. Thanks!

Answer 1

To avoid the breakpoints, you can switch to using container-fluid instead of container class for your containing DIV, like this:

<div class="container-fluid">
  ...
</div>

instead of:

<div class="container">
  ...
</div>

More information can be found here http://getbootstrap.com/css/#overview-container

Answer 2

please note that making all of the md, sm, lg and xs to break at the same screen size would be not a good solution. However you can do that -

2 ways of achieving this: go to bootstrap.css and find all references to @media references and change them to the same value eg @media(max-width:480px) { ... }

or other way is to recompile less => css go to variables.less - go to line 248: https://github.com/twbs/bootstrap/blob/master/less/variables.less

and update the values on all the screen sizes. then compile it and boom you have it.

hope that helps

Answer 3

To ensure all of the layouts stays the same of all of the devices just target the XS breakpoint.

 <div class="container-fluid">
    <div class="row">
        <div class="col-6"> Half of the screen</div>
        <div class="col-6"> Half of the screen</div>
    </div>
</div>

or you can just use flexbox solution

<div class="container-fluid">
    <div class="row">
        <div class="col"> Half of the screen</div>
        <div class="col"> Half of the screen</div>
    </div>
</div>