Bootstrap navbar doesn't fill the whole width

Question

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.

This hasn't helped so far:

  .navbar .navbar-collapse {
      white-space: nowrap;
      width:100%;
} 

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.

.navbar .navbar-collapse {
          white-space: nowrap;
          width:2000px;
    } 

Any advice how I can use the whole navbar width for the navbar items?

EDIT 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:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2538">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="navbar-brand"></span>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapse-2538">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#tab-3459-1" data-toggle="tab" data-value="TestA">TestA</a>
            </li>
            <li>
              <a href="#tab-3459-2" data-toggle="tab" data-value="TestB">TestB</a>
            </li>
            <li>
              <a href="#tab-3459-3" data-toggle="tab" data-value="TestC">TestC</a>
            </li>
            <li>
              <a href="#tab-3459-4" data-toggle="tab" data-value="Test1">Test1</a>
            </li>
            <li>
              <a href="#tab-3459-5" data-toggle="tab" data-value="Test2">Test2</a>
            </li>
            <li>
              <a href="#tab-3459-6" data-toggle="tab" data-value="Test3">Test3</a>
            </li>
            <li>
              <a href="#tab-3459-7" data-toggle="tab" data-value="Test4">Test4</a>
            </li>
            <li>
              <a href="#tab-3459-8" data-toggle="tab" data-value="Test5">Test5</a>
            </li>
            <li>
              <a href="#tab-3459-9" data-toggle="tab" data-value="Test6">Test6</a>
            </li>
            <li>
              <a href="#tab-3459-10" data-toggle="tab" data-value="Test7">Test7</a>
            </li>
            <li>
              <a href="#tab-3459-11" data-toggle="tab" data-value="Test8">Test8</a>
            </li>
            <li>
              <a href="#tab-3459-12" data-toggle="tab" data-value="Test9">Test9</a>
            </li>
            <li>
              <a href="#tab-3459-13" data-toggle="tab" data-value="Test10">Test10</a>
            </li>
            <li>
              <a href="#tab-3459-14" data-toggle="tab" data-value="Test11">Test11</a>
            </li>
            <li>
              <a href="#tab-3459-15" data-toggle="tab" data-value="Test12">Test12</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Solution 1

This is due to the Bootstrap responsive design. Read about disabling responsiveness here -> http://getbootstrap.com/getting-started/#disable-responsive

I dont know how far you want to go regarding resetting responsiveness, if your concern just is the navbar you could perhaps be satisfied with

.container {
    width: 100%;
    white-space: nowrap;
}

see demo -> http://jsfiddle.net/gfpua400/

It will of course still break if the width of the parent element (here the body) is too small to fit all your .icon-bar <span> elements, but this is just normal HTML rendering I guess you are aware of (can still be prevented too though)

Solution 2

Bootstrap uses a grid system and containers to control widths and spacing. You are using a <div class="container"> for your navbar, change this to <div class="container-fluid">.

You do not need to add any custom CSS and where possible avoid custom CSS unless you know what you're overriding as it could break page flow.

See http://getbootstrap.com/css/#overview-container for more information on this.

Comments

[MichiZH]

Exactly what I was looking for! Thanks alot

[Daniel Tung]

Don't override container would you could just use a container-fluid getbootstrap.com/css/#overview-container

[Daniel Tung]

You shouldn't remove the container as Bootstrap uses this to order and build the rest of the page and it could mess up margins or padding. Switch to container-fluid if you want to have a full width container. while retaining the responsive design getbootstrap.com/css/#overview-container