twitter-bootstrap 全宽 Bootstrap 下拉导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26449960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width Bootstrap dropdown nav
提问by Northys
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>
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).
我需要像这样创建下拉列表。我没有对导航栏和下拉菜单文件进行任何更改 - 这就是我不发布 CSS 的原因，它是纯 Bootstrap 3.2.0。我只是在 Chrome 中使用 CSS 规则，禁用它们并更改它们的值（那些与定位有共同之处）。
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.
添加了我自己的规则，但我仍然不知道如何使它成为 100% 的视口宽度。可能它从父级继承宽度 - 当然 - 没有视口宽度。这可能是问题所在。
Also I have found this topicbut 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.
另外我发现这个话题，但它并没有帮助我。我在舞台上得到了大约 800px 宽度的下拉列表（当我使用width: 100%），但它在“Kalkula?ky”下对齐，如果我想让它从屏幕的左边缘开始，我必须使用left: -100px. 你有什么想法？我完全迷失了。
Please be benevolent - I don't have good knowledge in CSS and I just started with Bootstrap.
请善待 - 我没有很好的 CSS 知识，我刚开始使用 Bootstrap。
回答by Bass Jobsen
For a default navbar component not wrapped in a div.containeryou can use the following CSS:
对于未包含在 a 中的默认导航栏组件，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; }
The display: table-cellcan also be replaced with display: inline-block;
该display: table-cell也被替换display: inline-block;
回答by Miomir Dancevic
Best to use this plugin
最好用这个插件
http://geedmo.github.io/yamm3/
http://geedmo.github.io/yamm3/
HTML
HTML
<nav class="navbar yamm navbar-default " role="navigation">
...
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
...
</li>
</ul>
</li>
</ul>
...
</nav>
LESS
较少的
/*!
* Yamm!3 - Yet another megamenu for Bootstrap 3
* http://geedmo.github.com/yamm3
*
* @geedmo - Licensed under the MIT license
*/
//-----------------------------
// Yamm Styles
//-----------------------------
.yamm {
// reset positions
.nav, .collapse, .dropup, .dropdown {
position: static;
}
// propagate menu position under container for fw navbars
.container {
position: relative;
}
// by default aligns menu to left
.dropdown-menu {
left: auto;
}
// Content with padding
.yamm-content {
padding: 20px 30px;
}
// Fullwidth menu
.dropdown.yamm-fw .dropdown-menu {
left: 0; right: 0;
}
}
回答by iamprogrammer10
Have you tried this CSS, it might help.
你有没有试过这个 CSS，它可能会有所帮助。
.dropdown-menu {
min-width:auto;
width:100%;
}
