Question

我正在尝试调整某些禁用标签标题的样式，但我没有运气找出正确的方法来做到这一点。我想更改背景颜色，文本颜色（可能还有字体粗细），甚至将其显示为链接。我有这个标签：

<b-tab title="Internal To Your Council" disabled></b-tab>

与其他标签具有相同的背景，设置如下：

.nav-tabs {
  background-color: #323232;
}

我也有其他一些样式，但是我尝试将“禁用”粘贴到它们上的方法都没有产生任何有用的东西。其他样式：

/* tab color */
.nav-tabs>li>a {
  border-color: #777777;
  color:#fff;
}

/* active tab color */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #323232;
}

/* hover tab color */
.nav-tabs>li>a:hover {
  border-color: #000000;
}

我只是想在声明中添加一个类，但这并不会更新整个选项卡背景。有没有办法做到这一点？如果不是这样，我只会对字体颜色感到满意，但我想错了。

Answer 1

在bootstrap documentation for tabs上，对于禁用的选项卡，它在disabled上添加了一个类.nav-link。那你调查了吗

.nav-tabs {
    .nav-link {
        &.disabled {
            // styles for disabled tabs
        }
    }
}

如果您不想将disabled类放在class属性中，而是想在nav-link上使用disabled属性，您仍然可以

.nav-tabs {
    .nav-link {
        &:disabled {
            // styles for disabled tabs
        }
    }
}

如何在Bootstrap 4中更改禁用标签的样式？

1 个答案: