Navbar高度的问题

Question

，请查看此示例模板：http：//jsfiddle.net/d8cye/2/

如您所见，navbar扩展到侧边栏的底部。为什么？我如何避免这种情况？

我知道我可以通过设置.navbar-inner{height:40px;}解决此方法。但是我觉得我在做错了，也许我用流体网格误解了一些东西。

Answer 1

在此处分配http://jsfiddle.net/astraldiva/r6thv/。

我认为，使用Twitter引导流体布局时要考虑的重要事情之一是没有固定宽度的项目，否则布局将制动。不确定这是否有帮助，但是我只是重新安排了容器并将内容放在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>

编辑

要获得通缉的布局，彼得在这个小提琴中对我的想法进行了扩展。

有一个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; for .navbar-inner，例如 demo

说明：使用display: inline-block;不会占用您的导航栏以前使用的额外空间，以及垂直方向...：）

CSS

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

编辑：如果您希望您的导航菜单是宽度的100％，而不是像这样

演示2

CSS

.navbar-inner {
   overflow: hidden;
}