Bootstrap2 Navbar 和下面的行之间的神秘空白
Posted
技术标签:
【中文标题】Bootstrap2 Navbar 和下面的行之间的神秘空白【英文标题】:Mysterious whitespace in between Bootstrap2 Navbar and row underneath 【发布时间】:2013-02-10 20:27:48 【问题描述】:我正在使用 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;
【问题讨论】:
jsfiddle.net/U7rRR 将我的内容放在navbar
下方的.row
中为我修复了这个神秘的空白
【参考方案1】:
您可能希望从 navbar
覆盖 margin-bottom: 20px
:
.navbar
margin-bottom: 0;
类似的东西:http://jsfiddle.net/q4M2G/
(!important
在这里只是为了覆盖我在 jsfiddle 中使用的引导程序的 CDN 版本的样式,但如果您的样式正确覆盖引导程序样式,则不需要使用它)
【讨论】:
删除表下空间的相同修复 这对我也有用。我在 NavBar 下方使用了一个 FooTable,20px 的空间看起来有点难看。谢谢@tchap【参考方案2】:你为什么要上课:span12 offset3
?
Bootstrap 默认有 12 列。因此,如果您没有更改它,请尝试输入:
span9 offset3
或只是span12
。
【讨论】:
你是对的。我编辑了问题以反映这些跨度应该是什么:span6 with offset3。感谢您指出这一点 不修复你的白色差距?你能提供一个jsFiddle吗? 我看到一切都是正确的,只是像我之前告诉你的那样删除 offset3...jsfiddle.net/dFzUN/1以上是关于Bootstrap2 Navbar 和下面的行之间的神秘空白的主要内容,如果未能解决你的问题,请参考以下文章
JqGrid的表头的总是和下面的数据行错位,尤其在一些列的表头宽度被拖动以后,错位就更大了。
bash中,我想匹配文件的某行,匹配到该行以后,将该行和下面的几行输出到另外一个文件,怎么实现?