css - 导航栏高度问题

Question

请看这个示例模板：http: //jsfiddle.net/D8cye/2/

如您所见，navbar扩展至侧边栏的底部。为什么？我怎样才能避免这种情况？

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

Answer 1

用于这样display: inline-block;的演示.navbar-inner

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

CSS

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

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

演示 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>

编辑

为了得到想要的布局，彼得在这个小提琴中扩展了我的想法。

有一个 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。

希望能帮助到你。