Bootstrap 3 hidden-*类在部分窗口尺寸区间无法正常生效问题

核心原因：断点设计存在未覆盖的亚像素区间 #

Bootstrap 3的四类hidden响应式类对应的媒体查询规则如下：

• hidden-xs：匹配视口宽度 ≤767px的场景，生效时添加display: none!important规则
• hidden-sm：匹配视口宽度 ≥768px 且 ≤991px的场景
• hidden-md：匹配视口宽度 ≥992px 且 ≤1199px的场景
• hidden-lg：匹配视口宽度 ≥1200px的场景

该设计采用整数作为互斥断点边界，没有覆盖非整数像素的场景。目前所有主流浏览器都支持亚像素精度的视口计算，当拖动窗口调整尺寸、高分屏显示存在缩放偏移时，很容易出现视口宽度刚好落在相邻断点间隙的情况（比如767px < 实际视口宽度 < 768px），此时四类hidden类的媒体查询都无法命中，元素会保持默认的显示状态。

关联现象说明 #

你观察到的Firefox扩展误判为LG尺寸的问题，是因为该扩展的断点判断逻辑采用了向上取整规则，只要视口宽度超过767px就会归类为更大的断点，和实际Bootstrap的媒体查询匹配逻辑不一致。
另外你提供的测试代码没有添加视口元标签<meta name="viewport" content="width=device-width, initial-scale=1">，会进一步加大浏览器视口宽度计算偏差，提高该问题的复现概率。

内容的提问来源于stack exchange，提问作者Andrew Barhatov