我正在为我的页面使用带有一些自定义 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。我只需要栏保持在原处而不是响应!
谢谢!
最佳答案
您必须删除 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!!! */
}
...
因此,自从我们将其移除后,就不再需要额外设置样式。
关于jquery - 禁用边栏模板的响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30552577/