css - Bootstrap 隐藏无法正常工作

Question

我有以下代码:

<div class="row">
        <div class="hidden-xs">
            <h1>Hello</h1>
        </div>
    </div>

我希望当宽度小于 480px 时它是不可见的，因为它是 Bootstrap css 文件中的默认值。但是，当我将宽度设置为小于 768 时，使用 Google Chrome 模拟器它会变得不可见 - 所以它的工作方式类似于 hidden-sm。当我将 hidden-xs 更改为 hidden-xs-down 时，它始终保持可见。

我做错了什么？

Answer 1

首先，您应该仔细检查或三次检查您的页面是否加载了 jQuery，然后再进行其他操作。之后应该遵循 Bootstrap 的 JS 和 CSS 库。

如果框架能够正确加载，Bootstrap 的默认类 hidden-xs 应该可以正常工作，任何时候都不需要更改任何 CSS 或 JS。我还想提一下 hidden-xs-down 不是 Bootstrap 标准，这就解释了为什么它不起作用。

什么是默认断点，768px 实际上是 XS，而 992px 是 SM 等等。

如果您希望 div 在宽度低于 480px 时消失，您应该创建自己的类。为此，只需将以下内容添加到您的 CSS 中:

@media (max-width: 480px)
{
   .hidden-xxs { display: none; }
}