Bootstrap 3个隐藏元素在半屏宽度上答案

【问题标题】：Bootstrap 3 hidden elements on half screen widthBootstrap 3个隐藏元素在半屏宽度上
【发布时间】：2018-04-01 22:17:02
【问题描述】：

我在使用 Bootstrap 3 时遇到了一个奇怪的错误，主要是在将我的浏览器宽度减小到半屏时，有一个几乎 1px 的微小阈值，其中 hidden-xs 和 hidden-sm 元素都出现在屏幕上。有没有办法通过隐藏 hidden-xs 或 hidden-sm 元素中的一个而不是同时显示来纠正这个问题？

我已经在 bootstrap 的网站示例中对此进行了测试，可以在此处找到 http://bootstrapdocs.com/v3.0.3/docs/css/ 下的帮助类 > 显示和隐藏内容

Here is bootstrap's website example on half screen

一旦屏幕宽度从半角缩小了一点点，就会显示以下内容（对不起，我只能发布一个链接）： ✔ 隐藏在 x-small 上（绿色）中（灰色） ✔ 隐藏在 x-small 和 small (绿色) ✔ 隐藏在 x-small 和 medium 上（绿色） ✔ 隐藏在 x-small 和 large（绿色）上

<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 元素所需的宽度有间隙）

【问题讨论】：

您可以在 sn-p 中添加部分代码。 IT 将显示您的问题，并且更容易从 SO 用户那里获得帮助；）欢迎
嗨，干杯。我觉得没有必要添加任何代码，因为我发现这是 Bootstrap 本身的实际问题，而不是我编写的代码，我将快速附上一个我遇到的问题的示例面对。
在测试和研究了更多之后......我在这里发现了这个问题：stackoverflow.com/questions/42180675/…，这是完全相同的错误，但我已经尝试了解决方案（重新排列媒体查询，现场试用网站等）但不幸的是我仍然有任何地方，有没有人有任何建议？

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

折腾了一段时间后，我找到了解决方案，但首先需要对问题进行更好的解释。

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

如果您希望 hidden-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;
    }
}

【讨论】：