Question

我正在使用此侧边栏为我的页面（http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/）

添加一些自定义CSS

我希望它禁用响应，但我不知道该怎么做。

This是我的自定义CSS，也许我正在监督某些事情？

这可能与此有关，但可能不是

#sidebar-wrapper {
box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 50px 1px rgba(255, 255, 255, 0.5);
z-index: 1000;
position: absolute;
right: 250px;
width: 0;
height: 100%;
margin-right: 0%;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

}

注意：我知道它看起来很糟糕并且使文本蒙上阴影，但我为我的页面使用了不同的HTML。我只需要保持它的位置而不是响应！

谢谢！

Answer 1

您必须删除CSS底部的媒体查询。

https://jsfiddle.net/Lare73s4/ @从第133行开始直到文件结束。

如果你保存它，你会注意到你的侧边栏已经消失，很容易修复：回到你的css顶部，更改＃sidebar-wrapper block的width属性。

#sidebar-wrapper {
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 50px 1px rgba(255, 255, 255, 0.5);
    z-index: 1000;
    position: absolute;
    right: 250px;
    width: 250px; /* I added 250px here, originally it's 0 */
    height: 100%;
    margin-right: 0%;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

我们删除的媒体查询是@media(min-width:768px) {，这意味着只要窗口至少为768px，就应用块中声明的这些样式。在那里，#sidebar-wrapper选择器的声明为width：

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px; /* here!!! */
    }
...

因此，自从我们删除它以后，不再需要设置样式的额外要求。

以下是工作代码：https://jsfiddle.net/1tbdn8oo/

禁用补充工具栏模板的响应速度

1 个答案: