全宽Bootstrap下拉导航 [英] Full width Bootstrap dropdown nav

问题描述

我正在尝试使用引导程序创建全宽下拉菜单，就像您在这张图片上看到的那样.现在我有了类似的东西(我从导航列表中删除了不必要的项目):

I'm trying to create full width dropdown using bootstrap as you can see on this picture. Now I have something like this (I have removed unnecessary items from the nav list):

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

我需要创建下拉列表.我没有对navbar进行任何更改，也没有删除更少的文件-这就是为什么我不发布CSS的原因，它是纯Bootstrap 3.2.0 .我只是在Chrome浏览器中玩过CSS规则，禁用了它们并更改了它们的值(这些值在定位方面很常见).

And I need to create dropdown like this one. I haven't done any changes to navbar and dropdown less files - this is the reason why I don't post CSS, it's pure Bootstrap 3.2.0. I just played with CSS rules in Chrome, disabled them and changed values of them (those that have something common with positioning).

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

Added my own rules but still I can't figure out how to make it 100% of viewport width. Probably it inherits width from parent which - of course - doesn't have viewport width. This could be the problem.

也我找到了这个主题但这对我没有帮助.我当时在舞台上有大约800px的宽度下拉菜单(当我使用width: 100%时)，但是它在Kalkulačky"下对齐，如果我希望它在屏幕的左边缘开始，则必须使用left: -100px.你有什么想法?我迷失了自己.

Also I have found this topic but it didn't help me. I was in stage where I got about 800px width dropdown (when I used width: 100%), but it was aligned under "Kalkulačky" and if I wanted it to start on the left edge of the screen I had to use left: -100px. Do you have any ideas? I'm competently lost.

请仁慈-我对CSS没有足够的了解，我只是从Bootstrap开始.

Please be benevolent - I don't have good knowledge in CSS and I just started with Bootstrap.

推荐答案

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

For a default navbar component not wrapped in a div.container you can use the following 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;

这篇关于全宽Bootstrap下拉导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！