导航栏高度问题

Question

请查看此示例模板：http://jsfiddle.net/D8cye/2/

如您所见，navbar扩展到侧边栏的底部。为什么？我怎么能避免这个？

我知道我可以通过设置.navbar-inner{height:40px;}来解决此问题。但我觉得我做错了，或许我误解了流体网格。

Answer 1

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

说明：使用display: inline-block;不会占用导航栏之前使用的额外空间，水平和垂直......：）

CSS

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

编辑：如果您希望导航菜单的宽度是100％，那么

Demo 2

CSS

.navbar-inner {
   overflow: hidden;
}

Answer 2

在这里分叉http://jsfiddle.net/Astraldiva/r6tHv/。

我认为使用twitter bootstraps流体布局时要考虑的重要事项之一是没有固定宽度的项目或布局会制动。不确定这是否有帮助，但我只是重新安排了容器，并将内容放在span8 + span4 div中，以获得您想要的类似布局，此版本应适用于不同的屏幕尺寸。

 <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 bootstrap css。

希望它有所帮助。