1

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.

4

2 回答 2

0

我更新了你的小提琴；我添加了

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

    width: 940px;

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

它使容器像一个真正的块：它的显示默认设置为块，但由于它的高度是 0px，它不像块，而是作为一个内联块。

还取消了clear:left;任何浮动冲突（我both不假思索地放了小提琴，但是嘿，现在是法国早上 6:30）。

于 2013-04-28T04:27:49.393 回答
0

既然您使用的是响应式导航栏，那么您是否有理由不使用响应式 CSS 文件，所以导航栏会崩溃？我将您的 CSS 文件替换为

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

在 account_corner div 中，您有 ul 但没有列表项。我用一个普通的 div 替换了 ul 。此外，如果您遵循http://twitter.github.io/bootstrap/components.html#navbar中的示例，则带有主链接的 div 应该具有这些类 

<div class="container nav-collapse">

这部分回答了你的问题。

这是结果http://jsfiddle.net/panchroma/ruAmz/？

希望他的帮助让你更接近你想要的！

于 2013-04-28T11:48:30.137 回答