Bootstrap2导航栏和下面的行之间的神秘空白

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用Bootstrap的Navbar和Bootsrap的网格来显示带有图像的Navbar，该图像紧靠Navbar下方。但是，由于某些原因，此导航栏和图像之间存在空白。当我使用Firebug调查空白的位置时，导航栏似乎在其contains的顶部对齐。我试图通过使用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;
}

回答：

您可能要覆盖margin-bottom: 20pxfrom navbar：

.navbar {
    margin-bottom: 0;
}

像这样的东西（!important此处仅用于覆盖我在jsfiddle中使用的CDN版本的bootstrap的样式，但是如果您的样式正确地覆盖了bootstrap，则无需使用它样式）

以上是 Bootstrap2导航栏和下面的行之间的神秘空白 的全部内容， 来源链接： utcz.com/qa/398428.html

回到顶部