Html Bootstrap 导航栏对齐/跨越占据全宽的菜单项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14601425/
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
Bootstrap navbar justify / span menu items occupying full width
提问by user2024774
I use the default Twitter Bootstrap responsive navbar (without the logo and search), but I want the menu items to be spanned, occupying the full width of the menu bar.
我使用默认的 Twitter Bootstrap 响应式导航栏（没有徽标和搜索），但我希望菜单项被跨越，占据菜单栏的整个宽度。
Here is what I have now default Bootstrap navbar (see --- as spaces):
这是我现在默认的 Bootstrap 导航栏（见 --- 作为空格）：
[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]
and the result I like to have (menu items occupying the full width):
以及我喜欢的结果（菜单项占据全宽）：
[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]
I hope someone can help.
我希望有人能帮帮忙。
回答by sgrodzicki
Have a look at Bootstrap's official example:
看看 Bootstrap 的官方示例：
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
回答by Seif Thompson-Doss
The official example works perfectly until you want to use those menu items with the native drop down calls. The drop down becomes the width of all of your drop down items combined.
官方示例完美运行，直到您想将这些菜单项与本机下拉调用一起使用。下拉成为所有下拉项目组合的宽度。
*note the ">", it will make the style stop from bleeding over into the .dropdown-menu subset.
*注意“>”，它将使样式停止渗入 .dropdown-menu 子集。
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav > li {
display: table-cell;
width: 1%;
float: none;
text-align: center;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
回答by Veikko Karsikko
.nav {
display:table;
}
.nav > li{
width: auto;
display:table-cell;
}
"width: auto;" solved the problem for me
" width: auto;" 为我解决了这个问题
回答by Jonathan James
Another solution: Media Queries that adjust menu padding for each item:
另一种解决方案：调整每个项目的菜单填充的媒体查询：
@media (max-width: 1200px) {
.navbar .nav > li {
padding: 0 4px 0 3px;
}
}
@media (min-width: 1200px) {
.navbar .nav > li {
padding: 0 20px 0 20px;
}
}
回答by Ray
this last example here, doesn't work for me either, the dropdownmenu always appears at the first li element.
此处的最后一个示例也不适用于我，下拉菜单始终出现在第一个 li 元素处。
setting the width of the main li elements with jquery is the only thing that worked for me, along the lines of
使用 jquery 设置主要 li 元素的宽度是唯一对我有用的东西，沿着
setNavWidth: function(){
var wi = parseInt(($('#navcontainer').width()-48)*.25);
for( var i = 0 ; i < 4; i++){
$('#carvernavli_'+i).width(wi);
}
}
so i have 4 main li elements and gave them an id, the "navcontainer" ist the container wrapping the navigation directly underneath "navbar-inner". you also have to call this function on window resize, than it works !
所以我有 4 个主要的 li 元素并给它们一个 id，“navcontainer”是将导航直接包装在“navbar-inner”下方的容器。您还必须在调整窗口大小时调用此函数，而不是有效！
回答by Tim P
I ended up using a slight variant, I didn't like the use of display:tableand wanted to use flexboxinstead.
我最终使用了一个轻微的变体，我不喜欢使用display:table并且想使用它flexbox。
CSS:
CSS：
.navbar .nav {
margin: 0;
display: flex;
flex-direction: row;
width: 85%;
}
.navbar .nav li {
flex: 1;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
flex: 1;
}
Html:
网址：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
{% block header %}
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MySite</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<!-- <li><a href="/submit">Submit</a></li> -->
<li><a href="/vendors">Vendors</a></li>
<li><a href="/news">News</a></li>
<li><a href="/about">About</a></li>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</ul>
</div><!--/.nav-collapse -->
{% endblock %}
</div>
</nav>
Result:
结果：
