有效的导航选项卡不应该有底线

时间:2016-04-23 19:54:07

标签: html css twitter-bootstrap

我正在尝试在表格下方显示标签式导航(class="nav nav-tabs"),并带有垂直空间。

当我使用“<p>&nbsp;</p>”作为间隔符时,标签会正确呈现。但这是太多的空间。我更喜欢使用“<br />”。

但是,当我使用“<br />”时,第一个“活动”标签会在其下边缘获取一条水平线。那是错的。

看起来像这样:

image description

这是代码。虽然我没有在JSFiddle中看到问题,只是在我的网站上(不是很有用?)...

https://jsfiddle.net/iamrobertandrews/ndkmw1te/

问题在Chrome中很明显,但在iOS或Mac OS X中不适用于Safari。

1 个答案:

答案 0 :(得分:0)

听起来你的<br/>标签可能会有一些CSS添加边框底部样式:first-child。

我已经分了你的例子,并添加了一点css来提供你解释过你要找的余量。

https://jsfiddle.net/xor4x5dw/

.nav.nav-tabs {
  margin-bottom: 10px
}

这是另一个例子,因为我无法判断你是否想要标签上方或下方的空间。

https://jsfiddle.net/607kn7b1/

.nav.nav-tabs {
  margin-top: 10px
}

此外,您可以删除P标签和BR标签的间距。