jquery - 禁用边栏模板的响应

Question

我正在为我的页面使用带有一些自定义 CSS 的侧边栏 (http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/)

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

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，就应用 block 中声明的这些样式。在 #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/