Css Bootstrap2导航栏和下面行之间的神秘空白
我使用Bootstrap的导航栏和Bootsrap的网格来显示导航栏,导航栏正下方有一个图像。但是,由于某些原因,此导航栏和图像之间存在空白。当我使用firebug来调查空白的位置时,导航栏看起来像是在其包含区域内顶部对齐的。我试图通过使用CSS将导航栏底部对齐来解决这个问题,但没有效果 如何消除此空白Css Bootstrap2导航栏和下面行之间的神秘空白,css,twitter-bootstrap,whitespace,navbar,removing-whitespace,Css,Twitter Bootstrap,Whitespace,Navbar,Removing Whitespace,我使用Bootstrap的导航栏和Bootsrap的网格来显示导航栏,导航栏正下方有一个图像。但是,由于某些原因,此导航栏和图像之间存在空白。当我使用firebug来调查空白的位置时,导航栏看起来像是在其包含区域内顶部对齐的。我试图通过使用CSS将导航栏底部对齐来解决这个问题,但没有效果 如何消除此空白 <!-- Top Navigation Bar --> <div class="row" id="rowTopLinkNavBar"> <div class
<!-- 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>
为什么要设置类:
span12偏移3
引导程序默认有12列。因此,如果您没有更改它,请尝试:
span9偏移量3
或仅span12
您可能需要覆盖导航栏中的页边距底部:20px
:
.navbar {
margin-bottom: 0;
}
诸如此类:
(这里的!important
只是覆盖我在JSFIDLE中使用的CDN版本引导的样式,但是如果您的样式正确地覆盖了引导样式,则不需要使用它)您是对的。我编辑了这个问题以反映这些跨度应该是什么:带偏移量3的跨度6。感谢您指出Out不能同时修复您的白色间隙?你能提供一个JSFIDLE吗?我认为一切都是正确的,就像我之前告诉你的那样,只需删除偏移量3。。。将我的内容放在导航栏下的行中
为meSame修复了这个神秘的空白,修复了删除表格下的空间的问题这对我也很有效。我在导航栏下面用了一个脚踏板,20px的空间看起来有点难看。谢谢@tchap
.navbar {
margin-bottom: 0;
}