MichiZH MichiZH - 3 months ago 12
HTML Question

Bootstrap navbar doesn't fill the whole width

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>

Answer

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)

Comments