Twitter BootStrapトップバーとドロップダウンメニュー

Question

左と右にリンクがいくつかあるトップバーを作成しようとしていますが、ドロップダウンでログインフォームを開くログインリンクがあります。 （ドロップダウンが開いているときや）私もクリックしたときにログインフォームが選択されたタブのように振る舞うべきであるとしたい

私のコードは次のようになります - 私は2を持っている

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

私はそれがタブのように振る舞いたいと思ったので、それらの一つは右にリストされています。私の問題は、ドロップダウンが開いているときにログインリンクを指している小さな矢印を削除できないことです。私は指し示された矢印なしで、その下のドロップダウンで選択されたタブのように見えます。

また、タブを選択すると、角が丸くなります。私はそれがCSSの問題だと確信していますが、それを探す場所がわからない..

アイデア？

P.S.私はBootStrap v2.0.1を使用しています

Answer 1

矢印は、擬似要素を使用してブートストラップによって追加されました。コードの「ログイン」部分でその機能を無効にすることができます。他のメニュー要素ではデフォルトの動作に変更はありません。このようにしても、ブートストラップを更新する必要はありません。

あなたはそうのように対応する擬似クラスへdisplay:noneを追加することにより、ログインボックスのドロップダウン矢印を削除することができます：ここ

CSS

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

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

クイックDemo、edit。