Question

我在Bootstrap 3上遇到一个奇怪的错误，基本上当我将浏览器宽度缩小到半屏时，屏幕上会出现一个几乎1px的小阈值，其中hidden-xs和hidden-sm元素都出现在屏幕上。有没有办法通过隐藏-xs或hidden-sm元素中的任何一个实际隐藏而不是两者都被显示来纠正这个问题？

我已经在帮助程序类＆gt;下的http://bootstrapdocs.com/v3.0.3/docs/css/这里找到的bootstrap网站示例中对此进行了测试。显示和隐藏内容

Here is bootstrap's website example on half screen

一旦屏幕宽度从半宽减少了一小部分，显示以下内容（抱歉，我只能发布一个链接）： ✔隐藏在x-small（绿色）中等（灰色） ✔隐藏在x小和小（绿色） ✔隐藏在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>

但是，当浏览器缩小到屏幕宽度的一半时，hidden-xs元素和hidden-sm，hidden-md hidden-lg元素都会保留在屏幕上，直到宽度减小或增加为止。（好像在宽度上有一个xs或sm元素的间隙）

Answer 1

在搞乱了一段时间之后，我发现了一个解决方案，但首先，需要对问题进行更好的解释。

此问题仅发生在每个元素大小类的确切最大宽度，例如仅限Google Chrome中的xs，sm等。 Bootstrap开发人员意识到了这个问题，但由于某些原因，他们还没有准备好对它采取行动。

如果您希望隐藏的xs和hidden-sm元素等不同时显示，则需要更改每个隐藏类的媒体查询的最大宽度以获得更多精度，例如hidden-xs，hidden-sm等为max-width：* .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;
    }
}

半屏宽度上的Bootstrap 3隐藏元素

1 个答案: