CSS Bootstrap2 导航栏和下面的行之间的神秘空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15071306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mysterious whitespace in between Bootstrap2 Navbar and row underneath
提问by BigSauce
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.
我正在使用 Bootstrap 的导航栏和 Bootsrap 的网格来显示一个导航栏，在导航栏下方有一个图像。但是，出于某种原因，此导航栏和图像之间存在空白。当我使用 firebug 调查空白的位置时，看起来导航栏在其包含的 . 我试图通过使用 CSS 底部对齐导航栏来解决这个问题，但无济于事。
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:
这是我使用 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;
}
回答by tchap
You may want to override the margin-bottom: 20pxfrom navbar:
您可能想要覆盖margin-bottom: 20pxfrom navbar：
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/(the !importantis 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)
类似的东西：http: //jsfiddle.net/q4M2G/（!important这里只是为了覆盖我在 jsfiddle 中使用的引导程序的 CDN 版本的样式，但如果您的样式正确覆盖引导程序，则不需要使用它样式）
回答by Andrea Turri
Why you put classes: span12 offset3?
你为什么要上课：span12 offset3？
Bootstrap has 12 columns default. so if you didn't changed it try to put:
Bootstrap 默认有 12 列。所以如果你没有改变它尝试把：
span9 offset3or just span12.
span9 offset3或者只是span12.
