Welcome to my first project utilizing Twitter Bootstrap.
While using Twitter Bootstrap, I've noticed that whether I use container-fluid or just container for my fixed top navbar, it expands to full width of the browser once it reaches around 980px. This behavior has been consistent in both Firefox and IE.
Any suggestions on how to address this issue?
Here is the code snippet:
Within the head section:
<link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
Within the body section:
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#"><i class="icon-home icon-white"></i></a>
<a class="brand" href="#">Time Machine: Lawrence, Kansas</a>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<div class="btn-group pull-right">
<a class="btn btn-inverse" href="#"><i class="icon-search icon-white"></i> Buildings</a>
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-search"></i> Blocks</a></li>
<li class="active"><a href="#"><i class="icon-search"></i> Buildings test out long string</a></li>
<li><a href="#"><i class="icon-search"></i> Businesses</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Contact Us</a></li>
</ul>
<a class="btn btn-inverse" href="#"><i class="icon-repeat icon-white"></i></a>
</div>
<li class="divider-vertical"></li>
</ul> <!-- nav class -->
</div> <!-- navbar-inner -->
</div> <!-- navbar navbar-fixed-top -->