如何拉伸Bootstrap导航栏的元素以利用整个宽度？
[英]How to stretch elements of a Bootstrap navigation bar to make use of the entire width?
问题描述
Consider the following Bootstrap navigation bar: 
请考虑以下Bootstrap导航栏：
Some facts about this navigation bar: 关于此导航栏的一些事实：
- The bar itself is exactly 620px broad (page's width) 条形本身正好宽620px（页面宽度）
- The bar is responsive (collapse breakpoint at 640px) 条形图是响应式的（折叠断点为640px）
- The bar's elements stick together (no space between) 酒吧的元素粘在一起（两者之间没有空格）
- The bar has multi-language support (the elements' widths change) 该栏具有多语言支持（元素的宽度变化）
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. 我想唯一的解决方案是JavaScript。 But I cannot find any example... 但我找不到任何例子......
Js Fiddle Demo: http://jsfiddle.net/zBM6D/3/ Js Fiddle演示： 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>
2 个解决方案
解决方案1
22 已采纳 2014-03-07 11:52:03
You could use CSS Table display layout to distribute your nav items. 您可以使用CSS表格显示布局来分发您的导航项目。 Its well supported across browsers and simple to implement: 它在浏览器中得到很好的支持并且易于实现：
.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 #page or make #page wider. 这使得它的父级#header的宽度为100％，而#header又受到#page宽度的#page ，所以如果你需要它超过整个文档宽度的100％，你需要将它移出#page或者使#page更宽广。
解决方案2
6 2014-09-18 06:13:52
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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.