Bootstrap2 导航栏和下面的行之间的神秘空白 [英] Mysterious whitespace in between Bootstrap2 Navbar and row underneath

查看：23
本文介绍了Bootstrap2 导航栏和下面的行之间的神秘空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap 的导航栏和 Bootsrap 的网格来显示一个导航栏，该导航栏的正下方有一个图像.但是，出于某种原因，此导航栏和图像之间存在空白.当我使用 firebug 调查空白的位置时，看起来导航栏在其包含的 .我试图通过使用 CSS 底部对齐导航栏来解决这个问题，但无济于事.

我怎样才能消除这个空白?

<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="#">首页</a></li><li class="divider"><a href="#">PROJECTS</a></li><li class="divider"><a href="#">关于我们</a></li><li class="divider"><a href="#">团队</a></li><li class="divider"><a href="#">EVENTS</a></li><li class="divider"><a href="#">MEETINGS</a></li><li><a href="#">RESOURCES</a></li>

<!--背景图片--><div class="row" id="rowBackgroundImg"><div class="span6 offset3" id="backgroundImg"><!-- 背景图片在 CSS 中设置 -->

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

#backgroundImg{颜色:#ff0000；背景色:#000000；/*宽度:709像素；高度:553px；*/背景: url('../images/someImage.jpg') 不重复；背景尺寸:100%；高度:700px；边界半径:0px；背景位置:中心；垂直对齐:顶部；背景位置:顶部；}#divTopLinkNavBar{垂直对齐:底部；}#topLinkNavBar{填充底部:0px；}#rowBackgroundImg{填充顶部:0px；}.导航栏{垂直对齐:底部；}

解决方案

您可能想要从 navbar 中覆盖 margin-bottom: 20px :

.navbar {底边距:0；}

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

I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.

How can I eliminate this whitespace? 

<!-- 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>

Here is my desperate attempt at fixing this issue using 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;
}

解决方案

You may want to override the margin-bottom: 20px from 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)

这篇关于Bootstrap2 导航栏和下面的行之间的神秘空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆