Twitter BootStrap TopBar和DropDown菜單

我想建立一個左側和右側有一些鏈接的頂欄，會有一個登錄鏈接，它將在DropDown中打開登錄表單。我也想登錄表單應該像一個選擇的選項卡單擊時（或當下拉打開時）Twitter BootStrap TopBar和DropDown菜單

我的代碼如下所示： -

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Section1</a></li> 
      <li><a href="#">Section2</a></li> 
     </ul> 

     <ul class="nav nav-tabs pull-right signin-menu"> 
      <li class="dropdown" data-dropdown="dropdown"><a href="#" data-toggle="dropdown" class="login-link dropdown-toggle">Login</a> 
       <ul class="dropdown-menu" id="signin-dropdown"> 
        <li> 
         <form>....</form> 
        </li> 
       </ul> 
      </li> 
     </ul>   
    </div> 
</div>

我有2列表，其中一個在右邊，因爲我希望它的行爲像標籤。我的問題是，當下拉列表打開時，我無法刪除指向登錄鏈接的小箭頭。我希望它看起來像一個選定的Tab，下面有下拉列表，沒有指向箭頭。

此外，選項卡上的標籤鬆脫了圓角。我相信這是一個CSS問題，但不知道在哪裏尋找它..

任何想法？

P.S.我在BootStrap v2.0.1上

來源

2012-02-29 Anuj Gakhar

因此，當你點擊「登錄」按鈕時，你想要一個沒有圓角的方形盒子，並且沒有箭頭可以下拉？ – 2012-02-29 18:59:21

只是不箭頭....圓形框是好的...就像在自舉頁面上的例子 – 2012-02-29 20:15:00

箭頭是由引導程序通過使用僞元素添加的，您可以通過定位您添加的唯一類來取消該代碼的「登錄」部分中的該功能，以便離開其他菜單元素的默認行爲不變。這種方式也使得無需引導的引導更新成爲可能。

您可以通過添加display:none到相應的僞類，像這樣刪除的登錄框的下拉箭頭：

CSS

.signin-menu .dropdown-menu:before { 
    display: none; 
} 

.signin-menu .dropdown-menu:after { 
    display: none; 
}

快速Demo，edit這裏。

來源

2012-02-29 20:39:51

真棒！萬分感謝。還有一件事 - 如何保持選中選項卡，活動的背景色爲白色，以便它看起來像標籤顏色是bg顏色是相同的形式？ – 2012-02-29 21:41:47

@Jimmy稍微修改一下（http://jsfiddle.net/N55dA/1/）就可以達到這個效果。 – 2012-02-29 21:57:02

Twitter BootStrap TopBar和DropDown菜單

回答

相關問題