Bootstrap 3 hidden-* 不适用于中间窗口大小答案

【问题标题】：Bootstrap 3 hidden-* doesn't work on intermediate window sizesBootstrap 3 hidden-* 不适用于中间窗口大小
【发布时间】：2021-12-24 15:52:11
【问题描述】：

Bootstrap 3 类 hidden-* 在某些窗口大小上似乎无法正常工作。我想这段代码必须永远隐藏文本：

<!doctype html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<body>
  <div class="hidden-xs hidden-sm hidden-md hidden-lg">hidden</div>
</body>
</html>

但在某些窗口宽度（以非常窄的间隔）显示。签入 Chrome、Firefox、Edge。 Firefox 扩展“Bootstrap - Responsible Helper”在文本可见时始终显示“LG”。

Screenshot from Chrome with devtools

Screenshot from Firefox

对于复制尝试大约 767 像素 +- 的窗口大小和 100% 的比例。

可能是什么问题？

【问题讨论】：

对我来说，一切都在您列出的所有浏览器中完美运行。文本永远不可见。检查documentation 一切似乎也是正确的。目前无法重现您的问题。

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

【解决方案1】：

试图在小提琴中重现错误，但它工作正常。 JSFiddle

另外，如果你想隐藏所有尺寸的东西，你可以使用hidden 而不是hidden-xs hidden-sm hidden-md hidden-lg。

或者，如果您愿意，可以让其在 lg 可见，使用：hidden visible-lg。所有断点都不需要冗余类。

【讨论】：

我不需要总是隐藏元素，这只是一个清晰展示“功能”的例子......真正的html更复杂。
那么我想这就是演示？您遇到的问题没有发生在您的 sn-p 或 Fiddle 中，所以它是您的代码中的其他内容。
我无法在 Fiddle 上重现，但我在我的所有浏览器中都使用此代码在本地 html 文件中看到了问题。我又添加了一张来自 Chrome 的屏幕截图，其中显示了 devtools。对于复制尝试窗口大小约 767px+- 100% 比例。
仍然对我有用，而且我确实看到了您的屏幕截图，为什么会发生这种情况真的很奇怪。我也会在本地试一试。
我确实意识到问题所在。 Bootstrap 使用 max-width: 767px; 代表 md 和 min-width: 768px; 代表 lg。因此，当大小介于 767 和 768 之间时，就会出现您的问题。他们已在最近的版本中修复了此问题，但我不明白为什么其他任何地方都没有出现此问题。

【解决方案2】：

尝试使用此表

另外我猜问题出在您的浏览器缓存或其他问题上，因为如果我运行 sn-p 行为是正确的

【讨论】：