导航栏高度问题答案

【问题标题】：Problems with navbar height导航栏高度问题
【发布时间】：2012-11-11 22:12:01
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

在这里分叉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 引导 css。

希望对你有帮助。

【讨论】：

问题是我需要一个固定宽度的侧边栏（放置广告和其他固定宽度的内容）。但我不能使用固定网格，因为它限制为 960 像素。我想做的是一个 maxwidth:1200px, minwidth:900px 的网站，它有一个固定宽度的侧边栏和流畅的内容。不应该太复杂。 :S
你指引我找到答案：jsfiddle.net/D8cye/9 现在有一个流畅的内容，有固定的侧边栏和导航栏工作正常。如果您编辑您的答案以反映这一点，我会批准它。
正在研究一个非常相似的示例：> 这就是我要获得您想要的结果的方法。很高兴你解决了。现在将进行编辑。干杯。

【解决方案2】：

将display: inline-block; 用于.navbar-inner 就像这样Demo

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

CSS

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

编辑：如果您希望导航菜单的宽度为 100%，那么就这样做

Demo 2

CSS

.navbar-inner {
   overflow: hidden;
}

【讨论】：

但是现在，导航栏的宽度并没有填满容器的宽度。
@Peter 查看第二个演示
这很奇怪。你不这么认为吗？我们不应该使用变通方法或技巧来使用框架来实现如此简单的任务。
@Peter 确实很奇怪......从来没有使用过引导程序，只是应用了普通的 CSS 规则
我会稍等片刻，然后再批准您的答案，看看是否有人给出了另一个答案。也许我以错误的方式使用引导程序。