twitter-bootstrap – Twitter BootStrap TopBar和DropDown菜单

发布时间：2020-12-17 21:35:20 所属栏目：安全来源：网络整理

导读：我正在尝试构建一个左侧和右侧有一些链接的顶部栏,将有一个登录链接,它将在DropDown中打开登录表单.我还希望登录表单在单击时(或下拉列表打开时)应该像选定的选项卡一样我的代码如下： – div class="navbar navbar-fixed-top"div class="navbar-inner" div

我正在尝试构建一个左侧和右侧有一些链接的顶部栏,将有一个登录链接,它将在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问题,但不知道在哪里寻找它..

有任何想法吗？

附：我在BootStrap v2.0.1上

解决方法

引导程序通过使用伪元素添加箭头,您可以通过定位您添加的唯一类来否定代码“登录”部分的该功能,以保持其他菜单元素的默认行为不变.这种方式也可以进行简单的引导程序更新.

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

CSS

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

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

快速Demo,edit在这里.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!