Html Bootstrap 3 垂直导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22849009/
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 3 Vertical Nav bar
提问by Smack
I want to create navigation bar [vertical]with bootstrap 3. I tried this but it didn't work.
我想用 bootstrap 3创建导航栏[垂直]。我试过这个，但没有用。
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?
我尝试了很多例子，但都是用旧的引导程序。如何使用新的引导程序创建导航？
回答by Samuel De Backer
nav-pillsclass needs two l:
nav-pills班级需要两个l：
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
回答by Matthew Darnell
It looks like you are missing an lin nav-pills(you have it listed as nav-pils)
看起来您缺少一个lin nav-pills（您已将其列为nav-pils）
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
回答by Arcsn
you could use the pills or you just could write this:
你可以使用这些药丸，或者你可以这样写：
your html:
你的html：
<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">LOGO</a>
<ul class="nav navbar-nav">
<li><a href="#home"><i class="fa fa-home"></i><span> Link1 </span></a></li>
<li><a href="#info"><i class="fa fa-info-circle"></i><span> Link2 </span></a></li>
<li><a href="#love"><i class="fa fa-heart"></i><span> Link3 </span></a></li>
<li><a href="#work"><i class="fa fa-briefcase"></i><span> Link4 </span></a></li>
<li><a href="#contact"><i class="fa fa-envelope"></i><span> Link5 </span></a></li>
</ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
<div class="row">
<h2>Link 1</h2>
</div>
</div>
<!-- 2nd section-->
<div class="container" id="info">
<div class="row">
<h2>Link 2</h2>
</div>
</div>
<!--3rd section-->
<div class="container" id="love">
<div class="row">
<h2>Link 3</h2>
</div>
</div>
<!--4th section-->
<div class="container" id="work">
<div class="row">
<h2>Link 4</h2>
</div>
</div>
<!--5th section-->
<div class="container" id="contact">
<div class="row">
<h2>Link 5</h2>
</div>
</div>
</div>
your css:
你的CSS：
/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.container {
height: 1000px;
}
.wrapper {
margin-left: 140px;
}
working example here: bootply
这里的工作示例：bootply
回答by Segun Kess
I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:
我来晚了，但如果你刚到这里并且想在垂直导航中添加切换：
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
回答by Anchit
Use navbar-pills. It will work.
使用导航栏药丸。它会起作用。
