Question

引导选项卡运行良好，但用户希望我增加边框的厚度。但是，当我从1px增加厚度时，活动标签最后会在底部边框上显示一条线。我尝试在活动选项卡上增加底部边框的粗细，但不会隐藏线条。

.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}

.nav-tabs > .active > a {
border-bottom: 3px solid #FFFFFF;
    /* works with 1px */
}

以下小提示显示问题：http://jsfiddle.net/jerrykur/FEuC3/

Answer 1

您可以尝试进一步向下移动标签，使其覆盖线条。只要底部边框不太厚，这将起作用。（您会注意到活动标签不会与其他标签保持一致）

.nav-tabs > .active.active {
    position: relative;
    top:2px;
}

Answer 2

我已经修改了你的jsfiddle，这是你之后的事情吗？

.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}

.nav-tabs > .active > a {
border-bottom: none;
position: relative;
top: 3px;

    /* works with 1px */
}

http://jsfiddle.net/FEuC3/2/

Answer 3

调整活动类的margin-bottom。

.nav-tabs>.active>a,
.nav-tabs>.active>a:hover,
.nav-tabs>.active>a:focus {
   margin-bottom: -3px;
}

您可能也可能不想使用：hover和：focus。

带有较粗边框的Bootstrap选项卡不起作用

3 个答案: