如何使Bootstrap标题项和下拉菜单具有相同的宽度?

时间:2016-07-15 12:24:32

标签: html css twitter-bootstrap twitter-bootstrap-3

我的Bootstrap模板中有这个标题:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            //Some unrelated stuff
        </div>

        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                //Some unrelated stuff          
            </ul>

            <ul class="nav navbar-nav pull-right-custom">
                <li class="dropdown">
                    <a href="" class="dropdown-toggle" data-toggle="dropdown">DDButtonText <strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        Test
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

我想要完成的是让下拉菜单的宽度与'DDButtonText'相同。我尝试将min-width设置为下拉菜单,但每个浏览器都有所不同。在我的Firefox中没用,但Chrome和其他浏览器的大小略有不同。

无论浏览器如何,我如何使菜单与按钮的大小相同?

1 个答案:

答案 0 :(得分:2)

您可以尝试添加此内容:

<强> CSS

.nav .dropdown-menu{
    width: 100%;
    min-width: inherit;
}

Bootply http://www.bootply.com/MfkTjxasD7