html - Bootstrap 选项卡透明下划线

Question

我正在尝试使事件/悬停选项卡的下划线透明。但我没有让它工作。有人知道怎么做吗？

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

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

    border-color: #fff #fff transparent;

我想我需要在这里做点什么。但仍然没有让它像我想要的那样工作。

Answer 1

由于您只能在 css 中覆盖边框，并且您不想设置蓝色来重叠您的边框之一，因此唯一剩下的(而且相当棘手)的方法是实现您正在寻找的效果是逐 block “构建”边界。

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

这是一个有效的 demo .

添加填充符的 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;
}