Bootstrap 3 hidden-* 不适用于中间窗口大小
Posted
技术标签:
【中文标题】Bootstrap 3 hidden-* 不适用于中间窗口大小【英文标题】：Bootstrap 3 hidden-* doesn't work on intermediate window sizes 【发布时间】：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 一切似乎也是正确的。目前无法重现您的问题。 【参考方案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 行为是正确的
【讨论】：
以上是关于Bootstrap 3 hidden-* 不适用于中间窗口大小的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Validate 不适用于 Bootstrap 3 选项卡式表单
jQuery .post() 函数不适用于 Bootstrap
Bootstrap Dropdowns 按钮不适用于 Angular 8 组件