Bootstrap隐藏不正常

Question

我有以下代码：

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

并且我希望当宽度小于480px时它是不可见的，因为它是bootstrap css文件中的默认值。但是，使用谷歌Chrome模拟器时，当我将宽度设置为小于768时，它变得不可见 - 因此它的工作方式类似于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; }
}