与导航栏高度

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