title: How to stretch elements of a Bootstrap navigation bar to make use of the entire width?
body: <p>Consider the following Bootstrap navigation bar:</p>
  
  <p><img src="https://i.stack.imgur.com/MDOAe.png" alt="My custom Bootstrap navigation bar"></p>
  
  <p>Some facts about this navigation bar:</p>
  
  <ul>
  <li>The bar itself is exactly 620px broad (page's width)</li>
  <li>The bar is responsive (collapse breakpoint at 640px)</li>
  <li>The bar's elements stick together (no space between)</li>
  <li>The bar has multi-language support (the elements' widths change)</li>
  </ul>
  
  <p>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...</p>
  
  <p>Js Fiddle Demo: <a href="http://jsfiddle.net/zBM6D/3/" rel="noreferrer">http://jsfiddle.net/zBM6D/3/</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="page"&gt;
          &lt;header id="header"&gt;
              &lt;nav class="navbar navbar-default roboto normal" role="navigation"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="collapse navbar-collapse" id="navigation-elements"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="active"&gt;&lt;a href="#"&gt;START&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;THESE&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;ARE&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;SOME&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;ELEMENTS&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;WITH&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;DIFFERENT&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;WIDTHS&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/header&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>