引導靜態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容器

回答

相關問題