CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jayeshkv
jayeshkv

Reputation: 2208

limit the width in bootstrap navbar

 <div class="span12">
         <div class="row">
             <div class = "span6"><h1>The big text here</h1></div> <!-- end of span6--> 
             <div class = "span5 offset1">
             <nav class = "navbar">
             <div class = "navbar-inner">
             <ul class = "nav">
             <li><a href="">Link1</a></li><li class="divider-vertical"></li>
             <li><a href="">Link2</a></li><li class="divider-vertical"></li>
             <li><a href="">Link3</a></li><li class="divider-vertical"></li>
             <li><a href="">Link4</a></li><li class="divider-vertical"></li>
             <li><a href="">Link5</a></li>

             </ul><!-- end of nav -->
             </div><!-- end of navbarinner -->
             </nav><!-- end of nav -->
             </div> <!-- end of span4 -->
         </div> <!-- end row -->
     </div> <!-- span 12 -->

my navbar

So thats my navbar and it has five items and i see the extra gap after the link5
currently both the text and the nav bar are in "span12" and "row" and then "The Big text here" is in "span6" and the navbar is in "span5 offset1" i tried using the span4 for navbar but it takes the links to the next line, now what should i do to make my link5 navbar look the same as others ?

Upvotes: 1

Views: 1315

Answers (1)

sulfureous
sulfureous

Reputation: 1526

It seems that you would need to float your .navbar to the right in order to stop the 100% width and make the element only as big as it's content

jsFiddle: Demo

Please notice in the fiddle on the markup in line 8 where I add the class .pull-right to make the navbar float to the right.

It's also worth to note that the .row class acts like a .span12 so you don't have to wrap your menu in it. Also note that your menu items will eventually stack if the window gets too narrow, but that's topic for another question on how to go about that.

As a little extra advice, you should try to format your code a little bit more so it's easier to read and debug.

Upvotes: 3

Related Questions