bootstrap static nav container

1
votes

I have modified my bootstrap skeleton top nav to this: http://jsfiddle.net/55dTU/

 <div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">SketchFemme</a>
      <div class="brand slogan">
        <span>pencial mileage</span><br>
        <span>one curve at a time</span>
      </div>
      <div class="container nav-collapse">
        <ul class="nav">
          <li><a href="/artists">Artists</a></li>
          <li><a href="/path2">Onion Skin</a></li>
          <li><a href="/path3">News</a></li>
          <li><a href="/path3">About</a></li>

        </ul>

        <ul class="nav" id="account_corner">

          <a href="/artists/homonolocus">homonolocus</a>
          <span class="divider">|</span>   
          <a href="/edit">Settings</a>
          <span class="divider">|</span>  
          <a href="/logout" data-method="delete" rel="nofollow">Sign out</a>

        </ul>

      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Bootstrap .container sets the width to 1170px. Can someone please tell me why the .container.nav-collapse div can be nested inside .navbar-inner .container and somehow overlap the .brand and slogan? I would think since every instance of .container is the width of 1170px, that the .nav links would be forced into the next line instead of being on the same line as the brand and slogan.

My question isn't so much that I need something to be fixed. Rather I'm asking for an explanation of why this works. Why can one .container contain another .container, of the same width right on top of it. I was looking for a position:absolute which would allow that, but I don't find any. How does the ul.nav know where to indent?... there is no left padding and no left margin, and the containing element spans the entire width of the navbar. I want to know how this is being achieved.

2
csstwitter-bootstrapnavbar

2 Answers

0
votes

I updated your fiddle ; I added 

.navbar-static-top .container, 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {

    width: 940px;

    height: 1px; /* These */
    clear:left;        
}

It makes the container act like a real block: its display is set to block by default, but as its height was 0px, it didn't act like a block but rather as an inline-block.

The clear:left; also cancel any floating conflict (I put both in the fiddle without thinking, but hey, it's 6:30 am here in France).

0
votes

Since you are using a responsive navbar, is there a reason why you aren't also using a responsive CSS file so the navbar collapses? I replaced your CSS file with

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');

In the account_corner div you have ul but no list items. I replaced the ul with a plain div. Also, if you are following the example from http://twitter.github.io/bootstrap/components.html#navbar the div with your main links should have these classes 

<div class="container nav-collapse">

Which partly answers your question.

This is the result http://jsfiddle.net/panchroma/ruAmz/ ?

Hope his helps get you closer to what you want!