我正在使用Bootstrap的Navbar和Bootsrap的网格来显示一个Navbar,其中的图像紧挨着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;
}
答案 0 :(得分:87)
您可能希望覆盖margin-bottom: 20px
的{{1}}:
navbar
类似的东西:http://jsfiddle.net/q4M2G/
(.navbar {
margin-bottom: 0;
}
在这里只是为了覆盖我在jsfiddle中使用的引导程序的CDN版本的样式,但如果你的样式正确覆盖引导程序样式,则不需要使用它)
答案 1 :(得分:0)
为什么要放课程:span12 offset3
?
Bootstrap默认有12列。所以,如果你没有改变它,试着把:
span9 offset3
或仅span12
。