bootstrap下拉菜单项大小不变

时间:2015-04-10 09:22:55

标签: jquery html5 css3 twitter-bootstrap drop-down-menu

我在引导程序导航栏下拉列表中还有一个问题

这是我的代码

<header class="navbar navbar-purple navbar-static-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://pos.shalvasoft.tk/"><span class="first">ShalvaSoft</span> <span class="second">POS</span></a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown langs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        <span class="caret"></span>
                        <span id="selectedlang"> <i class='flag-icon flag-icon-ge'></i></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li class="hidden"><a href="#" class="lang" data-link="ge"><i class='flag-icon flag-icon-ge'></i></a></li><li><a href="#" class="lang" data-link="ru"><i class='flag-icon flag-icon-ru'></i></a></li><li><a href="#" class="lang" data-link="en"><i class='flag-icon flag-icon-us'></i></a></li>                    </ul>
                </li>
                <li class="dropdown langs"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img src="http://pos.shalvasoft.tk/public/image/users/1_thumb.jpg" height="20px" width="20px"> <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="http://pos.shalvasoft.tk/logout">logout</a></li></ul></li>            </ul>
        </nav>
    </div>
</header>

现在在css我有这个统治者

.navbar-purple .navbar-nav > li:not(.langs) .dropdown-menu{width:118px !important;}
.navbar-purple .navbar-nav > li:not(.langs) .dropdown-menu > li{width:118px !important;}
.navbar-purple .navbar-nav > li.langs .dropdown-menu{min-width:63px !important;}
.navbar-purple .navbar-nav > li.langs .dropdown-menu > li{width:63px !important;}

如你所见,我需要添加clas langs,它的子节距为63px宽度 在其他我需要添加默认大小或118px。 但是这段代码不起作用 看图像

在这里你可以看到如何显示langs class

langs class

这是另一个下拉列表

other dropdown

如何更改:not(.langs)宽度?

1 个答案:

答案 0 :(得分:1)

这是显而易见的,因为您使用退出按钮的下拉列表具有&#39; langs&#39;类

<li class="dropdown langs">

删除它可以解决问题。