引导静态NAV容器

我已经修改我的引导骨架顶部导航这样的：http://jsfiddle.net/55dTU/引导静态NAV容器

<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>

引导.container设置宽度1170px。有人可以告诉我为什么.container.nav-collapse div可以嵌套在.navbar-inner .container内，并以某种方式重叠.brand和标语？我认为，因为.container的每个实例都是1170px的宽度，.nav链接将被强制进入下一行，而不是与品牌和标语位于同一行。

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

来源

2013-04-28 Homan

我更新了您的fiddle;我加

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

    width: 940px; 

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

它使容器的行为像一个真正的块：它的显示设置默认阻止的，但由于其高度为0像素，它并没有像块，而是作为一个inline-block的。

clear:left;也取消了任何浮动冲突（我把both放在小提琴里没有想到，但嘿，这是在法国这里的6:30）。

来源

2013-04-28 04:27:49 Bigood

由于您使用的是导航栏响应，是有一个原因，你是不是也用一个负责任的CSS文件，使导航栏崩溃？我

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

更换你的CSS文件在你有UL，但没有列表项account_corner股利。我用普通的div替换了ul。此外，如果您是从http://twitter.github.io/bootstrap/components.html#navbar下面的例子中你的主要环节的股利应具备这些类

<div class="container nav-collapse">

这在一定程度回答你的问题。

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

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

来源

2013-04-28 11:48:30

引导静态NAV容器

回答

相关问题