css - Bootstrap v3 hidden-* 特定断点宽度处的错误

Question

在 Chrome 或 Firefox 中访问以下代码笔，让你的屏幕宽度恰好为 767px、991px 或 1199px(注意这些宽度正好在 -1px bootstrap 的断点处) https://codepen.io/cpj22/pen/WVoKON

这个 div 应该是隐藏的，但它在那些确切的屏幕宽度下是可见的。相关的html:

<div class="row hidden-xs hidden-sm hidden-md hidden-lg">
    <div class="col-xs-12">
        this should always be hidden on all device widths!
    </div>
</div>

在所有其他屏幕宽度下，此 div 应完全隐藏。

Bootstrap v3.4.1，最新的v3。我希望我遗漏了一些东西，因为这发生在我们的应用程序中，因此对于碰巧将他们的屏幕/浏览器窗口设置为这些特定像素宽度中的任何一个的用户，他们会看到非常不正确的 View 。

Answer 1

这在 Bootstrap 4 中已修复。将这些行放在您的自定义样式表中，以便断点之间有 0.02 像素的空间。

@media (max-width:767.98px) {
    .hidden-xs {
        display:none!important
    }
}
@media (min-width:768px) and (max-width:991.98px) {
    .hidden-sm {
        display:none!important
    }
}
@media (min-width:992px) and (max-width:1199.98px) {
    .hidden-md {
        display:none!important
    }
}
@media (min-width:1200px) {
    .hidden-lg {
        display:none!important
    }
}