Bootstrap2导航栏和下方行之间出现神秘的空白

Question

我正在使用Bootstrap的导航栏和网格来显示一个在导航栏下方的图像。然而，由于某种原因，在这个导航栏和图像之间存在空白。当我使用Firebug调查空白的位置时，它看起来像导航栏在其包含的

内是顶部对齐的。我已经尝试使用CSS将导航栏底部对齐，但无济于事。

如何消除这个空白区域？

<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
    <div class="span6 offset3" id="divTopLinkNavBar">
        <div class="navbar" id="topLinkNavBar">
            <div class="navbar-inner" style="font-size: 16px;">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="divider"><a href="#">PROJECTS</a></li>
                    <li class="divider"><a href="#">ABOUT US</a></li>
                    <li class="divider"><a href="#">THE TEAM</a></li>
                    <li class="divider"><a href="#">EVENTS</a></li>
                    <li class="divider"><a href="#">MEETINGS</a></li>
                    <li><a href="#">RESOURCES</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--Background Image-->
<div class="row" id="rowBackgroundImg">
    <div class="span6 offset3" id="backgroundImg">
    <!-- background image is set in CSS -->
    </div>
</div>

这是我使用CSS试图解决此问题的绝望尝试：

#backgroundImg
{
    color: #ff0000;
    background-color: #000000;
    /*width: 709px;
    height: 553px;*/
    background: url('../images/someImage.jpg') no-repeat;
    background-size: 100%;
    height: 700px;
    border-radius: 0px;
    background-position: center;
    vertical-align: top;
    background-position: top;
}



#divTopLinkNavBar
{
    vertical-align: bottom;
}

#topLinkNavBar
{
    padding-bottom: 0px;
}
#rowBackgroundImg
{
    padding-top: 0px;
}

.navbar
{
    vertical-align: bottom;
}

- BigSauce

---

http://jsfiddle.net/U7rRR/ - BigSauce

将我的内容放在一个.row中的navbar下面，解决了这个神秘的空白问题。 - Connor Leech

Answer 1

您可能希望覆盖来自navbar的margin-bottom: 20px：

.navbar {
    margin-bottom: 0;
}

类似这样的内容：http://jsfiddle.net/q4M2G/ （!important 在这里只是为了覆盖我在 jsfiddle 中使用的 CDN 版本 bootstrap 的样式，但如果您的样式正确地覆盖了 bootstrap 样式，则不需要使用它）

- tchap

---

相同的修复，以删除表格下方的空格。 - blacelle

这对我也起作用了。我在 NavBar 下面使用了一个 FooTable，20px 的空间看起来有点丑。谢谢 @tchap - Anwaarullah

Answer 2

为什么要加上这些类：span12 offset3？

Bootstrap 默认有12列。所以如果你没有改变它，尝试添加以下代码： 或者只是 span12。

- Andrea Turri

---

你说得对。我编辑了问题，以反映这些跨度应该是span6和offset3。感谢您指出这一点。 - BigSauce

你的网页还是有空白吗？你能提供一个 jsFiddle 吗？ - Andrea Turri

我看到一切都正确，只需删除offset3，就像我之前告诉你要做的那样... http://jsfiddle.net/dFzUN/1/ - Andrea Turri