twitter-bootstrap - Twitter BootStrap 顶部栏和下拉菜单

Question

我正在尝试构建一个顶部栏，其左侧和右侧有一些链接，将有一个登录链接，可以在下拉菜单中打开登录表单。我还希望登录表单在单击时(或打开下拉列表时)表现得像选定的选项卡

我的代码如下所示:-

<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 个列表，其中一个位于右侧，因为我希望它表现得像选项卡一样。我的问题是，当下拉列表打开时，我无法删除指向登录链接的小箭头。我希望它看起来像一个选定的选项卡，其下方有下拉菜单，没有指向箭头。

此外，选择该选项卡时，它的圆角会消失。我确信这是一个 CSS 问题，但不知道在哪里寻找它..

有什么想法吗？

附注我使用的是 BootStrap v2.0.1

Answer 1

Bootstrap 使用伪元素添加箭头，您可以通过定位您添加的唯一类来否定代码的“登录”部分上的该功能，以保持其他菜单元素的默认行为不变。这种方式还可以轻松进行 Bootstrap 更新。

您可以通过将 display:none 添加到相应的伪类来删除登录框上的下拉箭头，如下所示:

CSS

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

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

快速Demo , edit在这里。