Bootstrap 3垂直导航栏

Question

我想创建导航栏[vertical] with 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> 

我尝试了很多的例子，但它是所有旧的引导。如何使用新的引导来创建导航？

Answer 1

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> 

http://getbootstrap.com/components/#nav-pills

Answer 2

它看起来像你缺少在nav-pills的l（你有它列为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> 

http://getbootstrap.com/components/#nav-pills

Answer 3

使用navbar-pills。它会工作。

Answer 4

您可以使用药片或者你只是可以这样写：

您的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> 

你的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; 
} 

工作示例这里：bootply

Answer 5

我来晚了，但如果你刚到这里，你想添加切换您的垂直导航：

<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>