2

在此处输入图像描述

引导程序 3。选项卡下很奇怪的细线。但不是所有选项卡，“设置”选项卡下面没有线是可以的。

它仅在Firefox中显示该行。其他浏览器没问题。

有人和我有同样的问题吗？

<ul class="nav nav-tabs">
    <li class="active"><a href="my_account.php"> Profile</a></li>
    <li><a href="my_account_settings.php"><i class="glyphicon glyphicon-cog"></i> Settings</a></li>
    <li><a href="my_account_credits.php"> Credits</a></li>  
</ul>
4

3 回答 3

1

导航选项卡将有一个边框，来自：

.nav-tabs {
    border-bottom: 1px solid #DDDDDD;
}

对于活动选项卡，此边框（底部）将通过以下方式隐藏：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
{
    border-color: #DDDDDD #DDDDDD transparent;
}

当您更改此 css 代码时，将 .nav-tabs 边框设置为 2px，活动的底部边框将不再隐藏。

更新

根据您的代码（包装在 .container div 中）在 FF en Chrome 中看到：

在此处输入图像描述

图像中配置文件选项卡下的行与预期不符。仅使用 Bootstrap 的 css 尝试您的代码。您的自定义 css 可能会更改边框颜色（.nav-tabs > li.active > a 等）？

于 2013-09-23T10:36:25.930 回答
1

我有同样的问题并解决了它。这条线的原因是我在导航中添加了徽章：

<span class="badge">xx</span>

为了删除细线，我刚刚在徽章中添加了一个“pull-right”类，它起作用了：

<span class="badge pull-right">xx</a>
于 2016-01-29T15:49:45.660 回答
0

我也遇到了这个问题，无法确定 css 有什么问题，尽管我在 chrome 上使用它。我注意到只有在标签标题中有图标或 img 时才会发生这种情况。如果您删除设置选项卡标题中的图标，您会看到这一点吗？尝试删除它。

于 2013-12-26T16:58:45.053 回答