半屏幕宽度的引导区3个隐藏元素

Question

我在Bootstrap 3中遇到了一个奇怪的错误，本质上，当我的浏览器宽度减少到半屏幕时，屏幕上出现了一个几乎1px的小阈值，其中隐藏的xs和隐藏的sm元素都出现在屏幕上。有没有什么方法可以纠正这一点，让隐藏的xs或隐藏的sm元素中的一个实际上被隐藏，而不是同时显示？

我已经在bootstrap的网站上测试了这个例子http://bootstrapdocs.com/v3.0.3/docs/css/在助手类下>显示和隐藏内容

以下是bootstrap在半屏幕上的网站示例

一旦屏幕宽度从一半宽度减少了一小部分，就会显示以下内容(对不起，我只能发布一个链接)：✔隐藏在x-small上(绿色)中等(灰色)✔隐藏在x-small和small上(绿色)✔隐藏在x中小型(绿色)✔隐藏在x大小(绿色)上

<div class='col-xs-12'><div class='hidden-xs'>This content should be hidden on mobile only, but visible on everything else</div><div class='hidden-sm hidden-md hidden-lg'>This content should be hidden on everything apart from xs devices</div></div>

然而，当浏览器缩小到屏幕宽度的一半时，隐藏的xs元素和隐藏的sm、隐藏的md和隐藏的lg元素都会保留在屏幕上，直到宽度缩小或增加。(就好像作为xs或sm元素所需的宽度中存在间隙一样)

Answer 1

经过一段时间的摸索，我发现了一个解决方案，但首先，需要对问题进行更好的解释。

这个问题只发生在每个元素大小类的确切最大宽度处，例如，仅在Google Chrome中的xs、sm等。引导程序开发人员已经意识到这个问题，但由于某种原因，他们还没有准备好采取行动

如果您希望隐藏xs和隐藏sm元素等不同时显示，则需要更改每个隐藏类的媒体查询的最大宽度以获得更高的精度，例如，隐藏xs、隐藏sm等为最大宽度：*.99；

我提供了一个例子如下：

@media only screen and (max-width: 767.99px) {
.hidden-xs {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991.99px) {
.hidden-sm {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199.99px) {
.hidden-md {
display: none;
}
}
@media only screen and (min-width: 1200px) {
.hidden-lg {
display: none;
}
}