Question

我已将我的bootstrap skeleton top nav修改为：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将宽度设置为1170px。有人可以告诉我为什么.container.nav-collapse div可以嵌套在.navbar-inner .container里面，并以某种方式重叠.brand和口号？我想是因为.container的每个实例都是1170px的宽度，.nav链接将被强制进入下一行，而不是与品牌和口号在同一行。

我的问题不是很多，我需要解决一些问题。相反，我要求解释为什么这有效。为什么一个.container包含另一个.container，它的顶部具有相同的宽度。我正在寻找一个位置：绝对可以允许，但我找不到。 ul.nav如何知道缩进的位置？...没有左边距和左边距，并且包含元素跨越导航栏的整个宽度。我想知道这是如何实现的。

Answer 1

我更新了您的fiddle;我添加了

.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）。

Answer 2

由于您使用的是自适应导航栏，您是否有理由不使用自适应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/？

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

bootstrap静态导航容器

2 个答案: