Bootstrap 3 - 如何使下拉菜单占据菜单全宽？

Question

我有这段代码：

<nav class="navbar navbar-inverse">
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="glyphicon my-icon"></span>
    </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="#">value</a>
        </li>
        <li class="dropdown">
            <ul class="dropdown-menu row">
                <div class="col-xs-12">
                    <li>
                        <a href="#">value</a>
                    </li>
                    <li>
                        <a href="#">value</a>
                    </li>
                </div>
            </ul>
        </li>
    </ul>
</div>  

正如您所看到的，它是一个非常标准的Bootstrap菜单。 我希望子菜单填满整个菜单宽度，但我还没有成功。

我有这个：

我想要这个： 提前谢谢！

Answer 1

这是您的解决方案

/* 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; }

这是你的Demo