2

我正在尝试使活动/悬停选项卡的下划线透明。但我没有让它工作。任何人都知道如何做到这一点？

截图： http: //i.imgur.com/m6ogRjB.png 我想删除红色标记的白线。设置蓝色边框底部颜色不是正确的解决方案，因为我需要它透明/删除。

JSFiddle：http: //jsfiddle.net/mULUv/6/

    border-color: #fff #fff transparent;

我想我需要在这里做点什么。但仍然不能像我想要的那样工作。

4

2 回答 2

1

由于您只能覆盖 中的边框css，并且由于您不想设置蓝色来重叠您的边框之一，因此实现您正在寻找的效果的唯一剩余（并且非常棘手）的方法是“构建”逐块边界。

这个想法是从ul容器栏中删除底部边框，并在选项卡之间添加填充物，然后在它们之后添加底部边框。然后，未悬停或未激活的选项卡将显示底部边框以封闭填充物之间的间隙。悬停或激活将导致选项卡失去底部边框并获得右、左和上边框。使用自定义 css 类（例如您的.tab-advancedthis）可以安全地完成，而不会覆盖内置的 BootStrap 类。

这是一个工作演示。

添加填充物的 html 代码将列表更改为：

<ul class="nav nav-tabs tabs-advanced">
    <li class="active"><a href="#1" data-toggle="tab">1</a></li>
    <li class="in-between-filler"></li>
    <li><a href="#2" data-toggle="tab">2</a></li>
    <li class="in-between-filler"></li>
    <li><a href="#3" data-toggle="tab">3</a></li>
    <li class="filler"></li>
</ul>

相应的附加css内容是：

.tabs-advanced {
    display: table;
    border: none;
}

.tabs-advanced > li{
    display: table-cell;
    float: none;
}

.tabs-advanced > li > a{
    margin-right: 0;
    border-bottom-style: none;
}

.tabs-advanced > li:not(.active):not(:hover) {
    border-bottom: 1px solid #ddd;
}

.tabs-advanced > li.filler{
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.tabs-advanced > li.in-between-filler{
    min-width: 2px;
    border-bottom: 1px solid #ddd;
}
于 2013-08-13T07:52:56.067 回答
0

你可以做...

border: none;

或者

border: 1px solid transparent;

（如果你还想要一条 1px 的线）

于 2013-08-11T16:55:58.777 回答