Question

Bootstrap有4种屏幕尺寸md, sm, lg and xs。

我刚发现这些屏幕尺寸或断点随分辨率而变化。

我在屏幕上标记了breakpoint of md不同的分辨率，但都不同。

现在，我的问题是我们如何确保布局符合我们的要求，因为屏幕断点似乎随着屏幕分辨率而变化，而且不同的设备有不同的屏幕分辨率？

如果所有设备的sm, md, lg and xs breakpoints都相同，那将很容易，但事实并非如此。我很感激任何解决这个困境的帮助。谢谢！

Answer 1

要避免断点，您可以切换为使用container-fluid代替container类来包含DIV，如下所示：

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

而不是：

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

可在此处找到更多信息http://getbootstrap.com/css/#overview-container

Answer 2

请注意，使所有md，sm，lg和xs在相同的屏幕尺寸下打破将不是一个好的解决方案。但是你可以这样做 -

实现这一目标的两种方法：转到bootstrap.css并查找对@media引用的所有引用，并将它们更改为相同的值例如 @media（max-width：480px）{ ... }

或其他方式是重新编译less =＆gt; CSS 转到variables.less - 转到第248行：https://github.com/twbs/bootstrap/blob/master/less/variables.less

并更新所有屏幕尺寸的值。然后编译它并繁荣你拥有它。

希望有所帮助

Answer 3

要确保所有布局与所有设备保持一致，只需定位XS断点。

 <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>

或者你可以使用flexbox解决方案

<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>

引导屏尺寸困境？

3 个答案: