與導航欄高度

Question

問題請看看這個樣本模板：http://jsfiddle.net/D8cye/2/

正如你所看到的，navbar擴展到側邊欄的底部。爲什麼？我怎樣才能避免這種情況？

我知道我可以通過設置.navbar-inner{height:40px;}來解決這個問題。但我覺得我做錯了，也許我誤解了流體網格中的某些東西。

Answer 1

這裏http://jsfiddle.net/Astraldiva/r6tHv/分叉它。

我認爲在使用twitter bootstraps流體佈局時要考慮的重要事情之一是不要固定寬度或佈局會制動的項目。不知道這是否有幫助，但我只是重新安排了容器，並將內容放置在span8 + span4 divs中，以獲得類似的佈局，就像你想要的，這個版本應該在不同的屏幕尺寸上工作。

<div class=row-fluid> 
    <div class=span8> 
     <div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
     <div class=navbar> 
      <div class=navbar-inner> 
       <ul class=nav> 
        <li class=active><a href=#>Home</a></li> 
        <li><a href=#>Link</a></li> 
        <li><a href=#>Link</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class=span4> 
     <div class=box></div> 
     <div class=box></div> 
     <div class=box></div> 
    </div> 
</div> 

編輯

爲了得到想要的佈局Peter做我的想法in this fiddle的延伸。

有一個2列布局，一個固定的邊欄和流體內容區（最大和最小寬度）。所以它不是完全流暢的，但解決了這個問題。

<div id=container> 
    <!-- Sidebar is floated right and has fixed width --> 
    <div id=side> 
     <div class=box></div> 
     <div class=box></div> 
     <div class=box></div> 
    </div> 
    <!-- Content wrapper is in normal flow with margin-right of at least the width of a sidebar--> 
    <div id=main> 
     <div class=row-fluid> 
      <div class=span12> 
      <div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 

      <div class=navbar> 
       <div class=navbar-inner> 
        <ul class=nav> 
         <li class=active><a href=#>Home</a></li> 
         <li><a href=#>Link</a></li> 
         <li><a href=#>Link</a></li> 
        </ul> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

#container { 
border: 1px solid #f00; 
max-width: 600px; 
min-width: 300px; 
} 

#side { 
float: right; 
width: 100px; 
border: 1px solid #0f0; 
} 

#main { 
margin-right: 108px; 
border: 1px solid #00f; 
} 

#text { 
padding: 8px; margin: 8px; border: 1px solid #888; 
} 

.box { 
height: 80px; 
margin-bottom: 8px; 
background: #ddd; 
} 

注：Twitter的引導CSS包括在內。

希望它有幫助。

Answer 2

使用display: inline-block;爲.navbar-inner這樣Demo

說明：使用display: inline-block;不會佔用您的導航欄，使用前將額外的空間，水平以及垂直... :)

CSS

.navbar-inner { 
    display: inline-block; 
} 

編輯：如果你希望你的導航菜單是寬度大於100％，做這樣的

Demo 2

CSS

.navbar-inner { 
    overflow: hidden; 
}