引导选项卡透明下划线 [英] Bootstrap tabs transparent underline

问题描述

我想让活动/悬浮标签的下划线透明。但我没有得到它的工作。任何人都知道如何做到这一点？

I'm trying to make the underline from the active / hovered tab transparent. But I didn't get it working. Anyone knows how to do this?

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

Screenshot: http://i.imgur.com/m6ogRjB.png I want the red marked white line removed. Setting blue border bottom color isn't the correct solution because I need it transparent/removed.

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

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

    border-color: #fff #fff transparent;

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

I guess I need something to do here. But still don't get it working like I want.

推荐答案

code> css ，因为你不想设置一个蓝色的颜色重叠你的一个边框，唯一剩下（而且很棘手）的方式实现你想要的效果是以逐个块建立边界 。

Since you can only cover up borders in css, and since you do not want to set a blue color to overlap one of your borders, the only remaining (and quite tricky) way of achieving the effect you are looking for is to "build" the borders block by block.

这个想法是从 ul 容器栏中移除底部边框，并在标签页之间添加填充这将有一个底部边框。然后，不悬停也不活动的凸片将具有显示为封闭填料之间的间隙的底部边界。悬停或激活将导致标签丢失底部边框，并获得右边，左边和上边框。使用自定义css类，如 .tab-advanced ，这可以安全地完成，而不覆盖内置的BootStrap类。

The idea is to remove the bottom border from the ul container bar and add fillers between the tabs and after them that would have a bottom border. Then, the tabs which are not hovered nor active will have a bottom border displayed closing the gaps between fillers. Hovering or activating will cause the tab to lose the bottom border and to gain a right, left and top border. Using a custom css class such as your .tab-advanced this can be done safely without overwriting the built-in BootStrap classes.

以下是有效的演示。

添加填充程序的HTML代码将列表更改为：

The html code to add the fillers changes the list to:

<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 / p>

and the corresponding additional css is:

.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;
}

这篇关于引导选项卡透明下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！