Twitter Bootstrap như thanh điều hướng dọc bên hông

Question

Tôi mới khởi động và có vấn đề trong việc tạo thanh điều hướng như bootstrap. Tôi đã đầu tư rất nhiều thời gian để thử nhưng không thể tìm ra. Những gì tôi muốn là như

Đây là những gì tôi tìm thấy here

<div class="span3 bs-docs-sidebar"> 
<ul class="nav nav-list bs-docs-sidenav affix"> 
    <li class="active"><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li> 
    <li class=""><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li> 
    <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li> 
    <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li> 
    <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li> 
    <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li> 
    <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li> 
    <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li> 
    <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li> 
    <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li> 
    <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li> 
    <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li> 
    <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li> 
    <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li> 
</ul> 

Answer 1

đã u kiểm tra bootstrap nav bar -> phần stackable, here?

<ul class="nav nav-tabs nav-stacked"> 
    ... 
</ul> 

Có vẻ giống như bạn đã hỏi ... đã thử cách này?

Answer 2

Sao chép css của bs-sidebar từ docs.css của twitter bootstrap; thêm CSS bổ sung mà được định nghĩa riêng biệt ở dưới cùng của cùng một tập tin như sau:

CSS

.bs-sidebar .nav > .active > ul { 
    display: block; 
    margin-bottom: 8px; 
} 

HTML

<div class="bs-sidebar affix"> 
    <ul class="nav bs-sidenav"> 
     <li class="active"><a href="#">NAV1</a> 
      <ul class="nav"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">NAV2</a></li> 
    </ul> 
</div>