如何拉伸Bootstrap导航栏的元素以利用整个宽度？ [英] How to stretch elements of a Bootstrap navigation bar to make use of the entire width?
问题描述
考虑以下Bootstrap导航栏：
Consider the following Bootstrap navigation bar:
有关此导航栏的一些事实：
Some facts about this navigation bar:
- 条形本身正好是620px宽（页面宽度）
- 条形图是响应式的（折叠断点为640px）
- 条形图的元素粘在一起（不之间的空间）
- 该栏具有多语言支持（元素的宽度更改）
- 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)
如何拉伸条形元素以利用整个宽度？右侧剩余的空白区域应分布在条形元素中。由于每个元素具有不同的宽度，并且此宽度可能因语言而异，因此我无法使用百分比。我想唯一的解决方案是JavaScript。但我找不到任何例子...
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...
Js Fiddle Demo： http://jsfiddle.net/zBM6D/3/
Js Fiddle Demo: 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>
推荐答案
您可以使用CSS表格显示布局来分发您的导航项目。其跨浏览器得到良好支持并且易于实施：
You could use CSS Table display layout to distribute your nav items. 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;
}
这使得它的父宽度 100％ #header ，反过来受 #page 的宽度限制，所以如果你需要它跨越整个文档宽度的100％你将需要将其移出 #page 或将 #page 更宽。
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.
这篇关于如何拉伸Bootstrap导航栏的元素以利用整个宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
