如何更改 Bootstrap 4 中禁用选项卡的样式？答案

【问题标题】：How do I change the style of disabled tabs in Bootstrap 4?如何更改 Bootstrap 4 中禁用选项卡的样式？
【发布时间】：2018-08-09 04:07:31
【问题描述】：

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

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

我只是在声明中添加了一个类，但这并没有更新整个选项卡背景。有没有办法做到这一点？如果没有，我会满足于使用不同的字体颜色，但我很愿意犯错。

【问题讨论】：

标签： css sass bootstrap-4

【解决方案1】：

在bootstrap documentation for tabs 上，对于禁用的选项卡，它会在.nav-link 上添加一个类disabled。那你有没有研究过

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

如果您不想将disabled 类粘贴到类属性中，而想在导航链接上使用disabled 属性，您仍然可以这样做

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

【讨论】：