Bootstrap2 Navbar 和下面的行之间的神秘空白

Posted 2023-03-06

【中文标题】Bootstrap2 Navbar 和下面的行之间的神秘空白

【英文标题】：Mysterious whitespace in between Bootstrap2 Navbar and row underneath

【发布时间】：2013-02-10 20:27:48

【问题描述】：

我正在使用 Bootstrap 的 Navbar 和 Bootsrap 的网格来显示 Navbar，并在 Navbar 正下方显示一个图像。但是，由于某种原因，此导航栏和图像之间存在空白。当我使用 firebug 调查空白的位置时，看起来 Navbar 在其包含的 .我试图通过使用 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;

【问题讨论】：

jsfiddle.net/U7rRR

将我的内容放在navbar 下方的.row 中为我修复了这个神秘的空白

【参考方案1】：

您可能希望从 navbar 覆盖 margin-bottom: 20px：

.navbar 
    margin-bottom: 0;

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

【讨论】：

删除表下空间的相同修复

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

【参考方案2】：

你为什么要上课：span12 offset3？

Bootstrap 默认有 12 列。因此，如果您没有更改它，请尝试输入：

span9 offset3 或只是span12。

【讨论】：

你是对的。我编辑了问题以反映这些跨度应该是什么：span6 with offset3。感谢您指出这一点

不修复你的白色差距？你能提供一个jsFiddle吗？

我看到一切都是正确的，只是像我之前告诉你的那样删除 offset3...jsfiddle.net/dFzUN/1