Рассмотрим следующую панель навигации Bootstrap:
Некоторые факты об этой панели навигации:
- Сама панель имеет ширину 620 пикселей (ширина страницы)
- Панель реагирует (сбойная точка останова при 640px)
- Элементы панели склеиваются (между пробелами нет пробелов)
- Панель поддерживает многоязычность (меняется ширина элементов)
Как я могу растянуть элементы бара, чтобы использовать всю ширину? Оставшееся пустое пространство справа должно быть распределено между элементами панели. Поскольку каждый элемент имеет разную ширину, и эта ширина может меняться от языка к языку, я не могу работать с процентами. Я предполагаю, что единственным решением будет JavaScript. Но я не могу найти ни одного примера...
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>