全宽Bootstrap下拉导航

Question

我正在尝试使用bootstrap创建全宽下拉,如您在此图片上看到的那样.现在我有这样的东西(我从导航列表中删除了不必要的项目):

<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>

我需要像这样创建下拉列表.我没有对导航栏和下拉文件做任何更改 - 这就是我不发布CSS的原因,它是纯粹的Bootstrap 3.2.0.我刚刚在Chrome中使用CSS规则,禁用它们并更改它们的值(那些与定位有共同点的那些).

添加了我自己的规则,但我仍然无法弄清楚如何使其100%的视口宽度.可能它从父级继承宽度 - 当然 - 没有视口宽度.这可能是问题所在.

另外我发现这个话题,但它并没有帮助我.我处于width: 100%可以获得大约800px宽度下拉的阶段(当我使用时),但它在"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; }

演示

该display: table-cell也被替换display: inline-block;