引导静态导航容器答案

【问题标题】：bootstrap static nav container引导静态导航容器
【发布时间】：2013-04-21 23:44:54
【问题描述】：

我已将我的引导框架顶部导航修改为：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 将宽度设置为 1170 像素。有人可以告诉我为什么 .container.nav-collapse div 可以嵌套在 .navbar-inner .container 内，并以某种方式与 .brand 和口号重叠？我认为由于 .container 的每个实例都是 1170px 的宽度，因此 .nav 链接将被强制到下一行，而不是与品牌和口号在同一行。

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

【问题讨论】：

标签： css twitter-bootstrap navbar

【解决方案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）。

【讨论】：

【解决方案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/ 的结果？

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

【讨论】：