html - 隐藏类 Bootstrap 不起作用？

Question

这是我的 HTML

<div class="container-fluid">
    <div class="row">
        <div class="header">
            <a href="#" class="col-xs-3 col-xs-offset-1 logo"></a>
            <div class="col-xs-6 col-xs-offset-1 nav hidden-sm-down "></div>
        </div>
    </div>
</div>

这是我的 CSS

.header{
    width: 100%;
    background-image: url("san_fran.jpg");
    background-size: cover;
}

.top-header{
    width: 100%;
}
.logo{
    background: url("logo-cinetik.png") center center no-repeat;
    height: 130px;
    min-width: 400px;
}

.nav{
    background-color: $test-color;
    height: 100px;
}

div 标签有 hidden-sm-down 类。当我的窗口小于某个点时它应该被隐藏，不是吗？

这是结果

应该隐藏红色的div! 我该怎么做？

Answer 1

这些是基于设备的类。

超小型设备 手机(<768px)(类名:.visible-xs-block, hidden-xs)

小型设备 平板电脑(≥768px)(类名:.visible-sm-block，hidden-sm)

中型设备 桌面(≥992px)(类名:.visible-md-block，hidden-md)

大型设备 桌面(≥1200px)(类名:.visible-lg-block，hidden-lg)

更多信息请引用此链接 http://getbootstrap.com/css/#responsive-utilities