我正在嘗試使用bootstrap 3創建一個類似於Udemy的固定導航條頂部。這包含一個左對齊的可摺疊下拉菜單。但兩次複製navbar-header都不起作用。 CSS不是我的強項。任何方向表示讚賞。如何創建另一個引導程序摺疊導航欄按鈕？

enter image description here

摺疊一個在左，一個在右。

enter image description here

更新

這是我到目前爲止所。我希望按鈕組項目採用引導程序（帶有圖標欄）的默認行爲，當爲較小的顯示調整大小時，它位於導航欄的最左角。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <header class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button>   
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <div class="btn-group header-dropdown nav navbar-nav"> 
      <button type="button" class="btn btn-success">Select City</button> 
      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Chennai</a></li> 
       <li><a href="#">Bangalore</a></li> 
       <li><a href="#">Mumbai</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Others</a></li> 
      </ul> 
      </div> 
     </li> 

     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
    </header> 
</nav>

來源

2014-04-27 RubyNoobie

爲什麼你想複製兩次導航欄頭？ – lagbox

就像我說的，我無能爲力:-)我以爲'icon-bar'類在'navbar-header'下，所以我不得不復制。 – RubyNoobie

[導航文檔的導航欄]（http://getbootstrap.com/components/#navbar） – lagbox

可以使用dropdown打造的「發現」菜單，和一些自定義CSS居中品牌。右邊的鏈接將切換/使用navbar-collapse ..

工作演示小屏幕上崩潰：http://bootply.com/133215

來源

2014-04-27 13:42:48 ZimSystem

由於您尚未提供任何代碼，因此很難確定您的項目出了什麼問題。你的下拉菜單應該是這個樣子，可能是其他的導航欄元素之前剛插入：

<div class="btn-group pull-left"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="sr-only">Button text</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 

    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div>

http://getbootstrap.com/components/#btn-dropdowns

來源

2014-04-27 13:27:07 isherwood

如何創建另一個引導程序摺疊導航欄按鈕？

更新

回答

相關問題