Bootstrap 导航栏固定宽度，但下拉菜单宽度为 100%答案

【问题标题】：Bootstrap Navbar fixed width, but dropdown-menu width 100%Bootstrap 导航栏固定宽度，但下拉菜单宽度为 100%
【发布时间】：2016-05-28 00:41:37
【问题描述】：

我正在使用 Bootstrap 3.0，我想创建一个固定的导航栏菜单，并在其下方设置一个 100% 的全屏宽度的下拉菜单。

看看屏幕是怎样的：

这是我的html代码：

<div class="navbar navbar-default container">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
    </ul>
</div>

非常感谢您的帮助。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在css中用作

/* CSS used here will be applied after bootstrap.css */.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }

或链接可以帮助你http://www.bootply.com/8EgGsi4F7w

【讨论】：

谢谢，我已经看过这样的例子，在我的例子中，导航栏 div 没有 100% 的屏幕宽度（请参阅我的更新图片）

【解决方案2】：

您的导航栏未覆盖 100% 屏幕的原因是因为您有 container 类，它仅在 XL 处使用 1170px，在 LG 处使用 970px，在 SM 处使用 750。将您的 HTML 更正为：

<div class="navbar navbar-default navbat-static-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
    </ul>
</div>

【讨论】：