twitter-bootstrap 如何拉伸 Bootstrap 导航栏的元素以利用整个宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22247911/
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
How to stretch elements of a Bootstrap navigation bar to make use of the entire width?
提问by Karsten
Consider the following Bootstrap navigation bar:
考虑以下 Bootstrap 导航栏：
Some facts about this navigation bar:
关于此导航栏的一些事实：
- The bar itself is exactly 620px broad (page's width)
- The bar is responsive (collapse breakpoint at 640px)
- The bar's elements stick together (no space between)
- The bar has multi-language support (the elements' widths change)
- 栏本身正好是 620px 宽（页面的宽度）
- 栏是响应式的（在 640 像素处折叠断点）
- 酒吧的元素粘在一起（之间没有空间）
- 该栏具有多语言支持（元素的宽度会发生变化）
How can I stretch the bar's elements to make use of the entire width? The remaining empty space at the right should be distributed among the bar's elements. Since each element has a different width and this width may change from language to language, I cannot work with percentages. I guess that the only solution will be JavaScript. But I cannot find any example...
如何拉伸栏的元素以利用整个宽度？右侧剩余的空白空间应分布在栏的元素之间。由于每个元素都有不同的宽度，而且这个宽度可能会因语言而异，因此我无法使用百分比。我想唯一的解决方案是 JavaScript。但我找不到任何例子......
Js Fiddle Demo: http://jsfiddle.net/zBM6D/3/
Js小提琴演示：http: //jsfiddle.net/zBM6D/3/
<body>
<div id="page">
<header id="header">
<nav class="navbar navbar-default roboto normal" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation-elements">
<ul class="nav navbar-nav">
<li class="active"><a href="#">START</a>
</li>
<li><a href="#">THESE</a>
</li>
<li><a href="#">ARE</a>
</li>
<li><a href="#">SOME</a>
</li>
<li><a href="#">ELEMENTS</a>
</li>
<li><a href="#">WITH</a>
</li>
<li><a href="#">DIFFERENT</a>
</li>
<li><a href="#">WIDTHS</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="clear"></div>
</header>
</div>
</body>
回答by Moob
You could use CSS Table display layout to distribute your nav items. Its well supported across browsersand simple to implement:
您可以使用 CSS Table 显示布局来分发您的导航项目。它在浏览器中得到很好的支持并且易于实现：
.navbar-nav {
display:table;
width:100%;
margin: 0;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
This makes it 100% the width of its parent #header, which in turn is restricted by the width of #page, so if you need it to span 100% of the whole document width you'll need to move it out of #pageor make #pagewider.
这使得它 100% 的宽度是其 parent 的宽度#header，而这又受到 的宽度的限制#page，因此如果您需要它跨越整个文档宽度的 100%，您需要将其移出#page或#page加宽。
回答by ?ukaszBachman
Based on @Moob's answer, I created a gist which should do that nicely:
根据@Moob 的回答，我创建了一个应该可以很好地做到这一点的要点：
https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css
https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css
