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

回答

相关问题