twitter-bootstrap - 全宽 Bootstrap 下拉导航

Question

我正在尝试使用 Bootstrap 创建全宽下拉列表 as you can see on this picture .现在我有这样的东西(我已经从导航列表中删除了不必要的项目):

<ul class="nav navbar-nav navbar-right">
    <li>
        <a href="/_work/cz.krupovi/www/o-nas">O nás</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Kalkulačky <span class="caret"></span></a>
        <ul class="dropdown-menu list-inline" role="menu">
            <li><a href="#">RPSN Kalkulačka</a>
            </li>
            <li><a href="#">Inflační kalkulačka</a>
            </li>
        </ul>
    </li>
</ul>

我需要创建 dropdown like this one .我没有对导航栏和下拉文件进行任何更改 - 这就是我不发布 CSS 的原因，它是纯 Bootstrap 3.2.0 .我只是在 Chrome 中使用 CSS 规则，禁用它们并更改它们的值(那些与定位有共同之处的)。

添加了我自己的规则，但我仍然不知道如何使它成为视口(viewport)宽度的 100%。可能它从父级继承宽度 - 当然 - 没有视口(viewport)宽度。这可能是问题所在。

还有I have found this topic但这对我没有帮助。我处于大约 800px 宽度下拉菜单的阶段(当我使用 width: 100% 时)，但它在“Kalkulačky”下对齐，如果我希望它从屏幕的左边缘开始，我必须使用 left: -100px .你有什么想法？我完全迷路了。

请仁慈 - 我对 CSS 没有很好的了解，我刚开始使用 Bootstrap。

Answer 1

对于未包含在 div.container 中的默认导航栏组件您可以使用以下 CSS:

.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
display: table-cell也可以替换为 display: inline-block;