Question

我正在尝试构建一个左侧和右侧有一些链接的顶部栏，会有一个登录链接，它会在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>

我有两个列表，其中一个在右边，因为我希望它的行为类似于标签。我的问题是，当下拉列表打开时，我无法删除指向登录链接的小箭头。我希望它看起来像一个选定的标签，下面有一个下拉列表，没有指向箭头。

此外，选中时标签会松开它的圆角。我确定这是一个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此处。

Twitter BootStrap TopBar和DropDown菜单

1 个答案: