如何自定義引導sidebar/sidenav？

我需要使用Twitter Bootstrap邊欄在我的Web應用程序中創建菜單（突出顯示爲紅色）。 enter image description here 如何自定義引導sidebar/sidenav？

創建如下所示的菜單。 enter image description here

頂部的項目有一個下拉，如法師所示。而菜單中的下一項應該在這下面。但這是我使用CSS時得到的結果。

enter image description here

菜單項overlaping其他。

這裏是引導代碼：

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

這裏是我的代碼：

<div class="span3 bs-docs-sidebar"> 
    <ul class="nav nav-list bs-docs-sidenav affix"> 
     <li> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <i class="icon-user"></i>dany 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a id="logout" href="#">Sign Out</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
<div class="span3 bs-docs-sidebar"> 
    <ul class="nav nav-list bs-docs-sidenav `affix`"> 
     <li><a href="#approval" id="approval"></i>Approval Requests</a></li> 
     <li><a href="#setting" id="setting"></i>Settings</a></li> 
    </ul> 
</div>

在引導CSS類設置的位置是bs-docs-sidenav和affix我相信。 twitter bootstrap的docs.css的css爲this

任何人都請儘快解決此問題。

來源

2013-01-04 dany

在兩個菜單上都使用了span3。這意味着第二個菜單將被放置在右側的下一個網格上，而不是在第一個菜單下。

我相信你應該開始喜歡這 -

<div class="span3 bs-docs-sidebar"> 
    <ul class="nav nav-list bs-docs-sidenav affix"> 
     <li> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <i class="icon-user"></i>dany 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a id="logout" href="#">Sign Out</a></li> 
      </ul> 
     </li> 
    </ul> 

    <ul class="nav nav-list bs-docs-sidenav affix"> 
     <li><a href="#approval" id="approval"></i>Approval Requests</a></li> 
     <li><a href="#setting" id="setting"></i>Settings</a></li> 
    </ul> 
</div>

現在申請一些CSS第二菜單上如

<ul class="nav nav-list bs-docs-sidenav affix" style="top: 200px;">

來源

2013-01-05 10:08:04 Salman

您已經創建了兩個span3 bs-docs-sidebar div，因此您可以看到並行的側邊欄。如果你想要菜單'dany'固定在頂部，那麼最好將它們放在頂部條上使用<div class="navbar navbar-inverse navbar-fixed-top">

來源

2013-01-04 19:52:05 arunky

如何自定義引導sidebar/sidenav？

回答

相關問題