css - bootstrap 3 中的隐藏 sm

Question

我正在尝试创建一个简单的侧边栏，它将隐藏在小型设备上..

但不能让它工作.. #sidebar 要么被隐藏，要么 #main 上的 padding-left 设置为 0

<div id="sidebar" class="hidden-sm">sidebar</div>
<div id="main">test</div>

@media (max-width:767px) {
    #main {
        padding-left:0;
    }
}

#sidebar {
    width:200px;
    float:left;
    background:red;
}

#main {
    padding-left:200px;
}

Answer 1

如果我正确地解释了您要说的内容，当侧边栏被隐藏时，您希望主 div 位于屏幕的最左侧边缘吗？

只需摆脱该 div 的填充样式即可实现这一点。

BOOTPLY

HTML:

<div id="sidebar" class="hidden-sm">sidebar</div>
<div id="main">test</div>

CSS:

#sidebar {
    width:200px;
    float:left;
    background:red;
}