隐藏类引导程序不起作用？

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

这些是基于设备的类。

超小型设备 电话（＆lt; 768px）(Class names : .visible-xs-block, hidden-xs)

小型设备 平板电脑（≥768px）(Class names : .visible-sm-block, hidden-sm)

中型设备 桌面（≥992px）(Class names : .visible-md-block, hidden-md)

大型设备 桌面（≥1200px）(Class names : .visible-lg-block, hidden-lg)

请参阅此链接以获取更多http://getbootstrap.com/css/#responsive-utilities