Bootstrap 3 Thanh điều hướng dọc

Question

Tôi muốn tạo thanh điều hướng [dọc] với bootstrap 3. Tôi đã thử cách này nhưng không hoạt động.

<ul class="nav nav-pils nav-stacked"> 
    <li>jedan</li> 
    <li>dva</li> 
    <li>tri</li> 
    <li>cetriri</li> 
    <li>pet</li> 
</ul> 

Tôi đã thử rất nhiều ví dụ nhưng đó là tất cả với bootstrap cũ. Làm thế nào để tạo điều hướng đó với bootstrap mới?

Answer 1

nav-pills lớp cần hai 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

Dường như bạn đang thiếu một l trong nav-pills (bạn có nó được liệt kê như 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

Sử dụng thanh điều hướng. Nó sẽ hoạt động.

Answer 4

bạn có thể sử dụng thuốc hoặc bạn chỉ có thể viết này:

html của bạn:

<!--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 của bạn: Ví dụ

/* 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; 
} 

làm việc ở đây: bootply

Answer 5

tôi đến muộn với bữa tiệc nhưng trong trường hợp bạn vừa mới đến đây và bạn muốn thêm công tắc để điều hướng dọc của bạn:

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