title: Bootstrap navbar doesn't fill the whole width
body: <p>I am a bootstrap newbie and I have built a HTML site using R and Shiny, which again uses Bootstrap. If you open the page on a wide screen, the page uses the whole width, however the navbar seems limited to like maybe 1000px width. After this width it gets a line break and all further items are showed in line 2. I however want to use the whole width possible until it starts a new row. Of course if the navbar has too many items even for the wide screens it should start a second row, but not if there is some screenspace left. </p>
  
  <p>This hasn't helped so far:</p>
  
  <pre><code>  .navbar .navbar-collapse {
        white-space: nowrap;
        width:100%;
  } 
  </code></pre>
  
  <p>Setting a fixed pixel width (what I don't want, I did it just for tests) didn't center the navbar anymore but extened it to the further right.</p>
  
  <pre><code>.navbar .navbar-collapse {
            white-space: nowrap;
            width:2000px;
      } 
  </code></pre>
  
  <p>Any advice how I can use the whole navbar width for the navbar items?</p>
  
  <p><strong>EDIT</strong>
  No clue how to put this in a jsfiddle or something, since this is automatically generated as said by R and shiny. But here is the relevant HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top" role="navigation"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2538"&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;span class="navbar-brand"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse" id="navbar-collapse-2538"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;
                &lt;a href="#tab-3459-1" data-toggle="tab" data-value="TestA"&gt;TestA&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-2" data-toggle="tab" data-value="TestB"&gt;TestB&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-3" data-toggle="tab" data-value="TestC"&gt;TestC&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-4" data-toggle="tab" data-value="Test1"&gt;Test1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-5" data-toggle="tab" data-value="Test2"&gt;Test2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-6" data-toggle="tab" data-value="Test3"&gt;Test3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-7" data-toggle="tab" data-value="Test4"&gt;Test4&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-8" data-toggle="tab" data-value="Test5"&gt;Test5&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-9" data-toggle="tab" data-value="Test6"&gt;Test6&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-10" data-toggle="tab" data-value="Test7"&gt;Test7&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-11" data-toggle="tab" data-value="Test8"&gt;Test8&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-12" data-toggle="tab" data-value="Test9"&gt;Test9&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-13" data-toggle="tab" data-value="Test10"&gt;Test10&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-14" data-toggle="tab" data-value="Test11"&gt;Test11&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#tab-3459-15" data-toggle="tab" data-value="Test12"&gt;Test12&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>