twitter-bootstrap 使 Bootstrap 仪表板示例侧边栏在移动设备上可见/可用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22985370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making the Bootstrap dashboard example sidebar visible/available on mobile
提问by Eirik H
The Boostrap dashboard examplehides the sidebar navigation completely (not collapsed or stacked) when screen width is less than 768px. How would you go about supporting mobile with such a setup?
所述自举仪表板示例隐藏侧边栏导航完全（未折叠或层叠）时屏幕宽度小于768px。您将如何通过这样的设置来支持移动设备？
采纳答案by SW4
The CSS for the sidebar at 'larger than' mobile view is specified in:
“大于”移动视图侧边栏的 CSS 指定于：
@media (min-width: 768px)
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
After which it reverts to its default of display:none
之后它恢复到默认值 display:none
.sidebar {
display: none;
}
You would need to either change its default CSS, or add a new media query, e.g.
您需要更改其默认 CSS，或添加新的媒体查询，例如
@media (max-width: 768px)
@media (max-width: 768px)
In order to specifically target smaller devices. The type of styling you wish to apply will depend on what you're after.
为了专门针对较小的设备。您希望应用的样式类型取决于您的追求。
回答by Zim
Bootstrap 4
引导程序 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
在 Bootstrap 4 中创建响应式导航栏侧边栏“抽屉”？
Bootstrap 3
引导程序 3
Another option is to combine the Dashboard and the "off-canvas" sidebar templates. This layout allows the sidebar to be toggled off/on screen at smaller widths...
另一种选择是组合仪表板和“画布外”侧边栏模板。这种布局允许侧边栏以较小的宽度在屏幕上关闭/打开...
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
margin-left: 10px;
}
}
/* Sidebar navigation */
.nav-sidebar {
background-color: #f5f5f5;
margin-right: -15px;
margin-bottom: 20px;
margin-left: -15px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #428bca;
}
