29

我正在使用 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;
}
4

2 回答 2

89

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

.navbar {
    margin-bottom: 0;
}

Something like that : http://jsfiddle.net/q4M2G/ (the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)

于 2013-02-25T16:50:12.463 回答
0

你为什么要上课：span12 offset3？

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

span9 offset3或者只是span12。

于 2013-02-25T16:16:29.903 回答