媒体查询未按预期工作（隐藏类 Bootstrap）答案

【问题标题】：Media queries not working as expected (Hidden classes Bootstrap)媒体查询未按预期工作（隐藏类 Bootstrap）
【发布时间】：2017-05-03 16:52:29
【问题描述】：

在浏览器中的某些断点上，我在使用 Bootstrap (V3.3.7) 时得到了一些意想不到的结果。所以我用 BS 隐藏类做了一个小实验。

BS CSS 文件包含以下隐藏类的 CSS：

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

我已经设置了以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Test Bootstrap hidden classes</title>

    <link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <style>
        .hidden-xs{ color: red; }
        .hidden-sm{ color: blue; }
        .hidden-md{ color: pink; }
        .hidden-lg{ color: green; }
    </style>
</head>
    <body>
        <div class="hidden-xs">Hidden xs</div>
        <div class="hidden-sm">Hidden sm</div>
        <div class="hidden-md">Hidden md</div>
        <div class="hidden-lg">Hidden lg</div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
        <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    </body>
</html>

对于我一直期望的 CSS，在我的设置中将有 3 个可见的元素。然而，在窗口宽度 767、991 和 1199 上存在 4 个元素。我在 Chrome 和 Firefox 中对此进行了测试。

我假设使用 BS 中的媒体查询的方式是正确的方式。为什么我会得到这个结果？是我遗漏了什么还是 BS 使用媒体查询有误？

【问题讨论】：

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

【解决方案1】：

我的项目中遇到了类似的问题，所以我像这样编辑了引导代码，它似乎解决了这个问题。

@media (max-width: 767.99px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991.99px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.99px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

我认为这里的根本问题是浏览器以像素为单位测量宽度，但 css 在类之间留下了 1 个像素的间隙。

【讨论】：