禁用边栏模板的响应

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 的 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) {，这意味着只要window至少为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/

禁用边栏模板的响应

Disable responsiveness for Sidebar template

html

css

jquery

sidebar