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

Question

在 Chrome 或 Firefox 中访问以下 codepen，并让您的屏幕宽度恰好为 767px、991px 或 1199px（注意这些宽度正好在 -1px 引导程序的断点处） 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。我希望我遗漏了一些东西，因为这发生在我们的应用程序中，因此对于碰巧将屏幕/浏览器窗口设置为任何这些特定像素宽度的用户，他们看到的视图非常不正确。

标签： csstwitter-bootstrap-3

Answer 1

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

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