Question

在浏览器中的某些断点上，使用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使用媒体查询错了吗？

Answer 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个像素的间隙。

媒体查询未按预期工作（隐藏类引导程序）

1 个答案: