twitter-bootstrap 需要 Bootstrap 左侧导航示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22902875/
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
Bootstrap left side navigation example needed
提问by WebPhenom
Looking for some clean and simple examples to set up a responsive left side navigation, almost exactly like Foundation uses for their ver. 4 docs page at http://foundation.zurb.com/docs/v/4.3.2/index.htmlNeeds to be able to link to pages and and also expand if there are sub pages grouped below it. Any good Bootstrap examples that do this?
寻找一些干净简单的示例来设置响应式左侧导航，几乎与 Foundation 在其版本中使用的完全一样。位于http://foundation.zurb.com/docs/v/4.3.2/index.html 的4 个文档页面 需要能够链接到页面，并且如果下面有分组的子页面，还可以展开。有什么好的 Bootstrap 示例可以做到这一点？
回答by Zim
Take a look at this example. It's a left side off-canvas menu with collapsible submenu..
看看这个例子。这是一个带有可折叠子菜单的左侧画布菜单。
Bootstrap 3:http://www.bootply.com/129625
引导程序 3：http : //www.bootply.com/129625
/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
.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-right
.sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
background-color:#3b3b3b;
padding-top:0;
}
#sidebar .nav>li {
color: #ddd;
background: linear-gradient(#3E3E3E, #383838);
border-top: 1px solid #484848;
border-bottom: 1px solid #2E2E2E;
}
#sidebar .nav>li:first-child {
border-top:0;
}
#sidebar .nav>li>a {
color: #ddd;
}
#sidebar .nav>li>a>img {
max-width: 14px;
}
#sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus {
text-decoration: none;
background: linear-gradient(#373737, #323232);
color: #fff;
}
#sidebar .nav .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
#sidebar .nav a:hover .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
}
Bootstrap 4:https://www.codeply.com/go/JbaVzJCNLJ/bootstrap-4-off-canvas-sidebar
引导程序 4：https : //www.codeply.com/go/JbaVzJCNLJ/bootstrap-4-off-canvas-sidebar
