Bootstrap：tr 类“警告”在条带表中不起作用答案

【问题标题】：Bootstrap: tr class "warning" doesn't work in striped-tableBootstrap：tr 类“警告”在条带表中不起作用
【发布时间】：2018-02-13 22:22:40
【问题描述】：

我定义了一个表 <table class="table table-striped">，其中包含一些行，例如 <tr class="success">、<tr class="info"> 和 <tr class="warning">。

success 和 info 表格行显示得很好：红色和蓝色就像它们应该的那样。但是warning 行没有按预期显示黄色。它们只是普通的斑马条纹白色或灰色。

奇怪的是，如果我将table-hover 添加到表的类中，warning 行将显示为黄色，但仅在悬停时才会显示。但是，success 和 info 行始终显示它们的颜色，悬停或不显示。

【问题讨论】：

我似乎没有任何问题jsfiddle.net/C9Phk，你的小提琴也可以吗？
是的，@VikasGhodke。它工作正常。
可能是具体问题。要么深入研究 CSS 文件，看看哪个规则覆盖了 .table .warning ，要么简单地使用 .table .warning 创建一个新的样式规则，并将 put 放在引导样式之后。
很奇怪，它现在也对我有用。我一定在其他地方搞砸了……感谢您的帮助，并为误报感到抱歉。
嗨乔纳森，不知何故我得到了这个完全相同的东西。删除类table-striped 显示正确的颜色，但使用table-striped 它就不会显示..知道你是如何解决这个问题的吗？ edit 几分钟后想通了； .table-striped 的样式被第二个 CSS 否决，但 .success （等）类不应该否决 .table-striped 没有定义！

标签： html css twitter-bootstrap

【解决方案1】：

关于 v3.0.3 的这个问题（将在 v3.1 中修复，只要他们发布它），一个快速/粗略的解决方法是为这个问题添加 !important 覆盖到一些特定的 CSS：

.table-striped > tbody > tr > .danger,
.table-striped > tbody > .danger > td,
.table-striped > tbody > .danger > th {
  background-color: #f2dede !important;
}

如果你使用这些，显然为thead、tfoot 等和success、info 等添加这个。我只使用danger，并且只在tbody。我将这些修改放在我的 bootstrap.css 文件中，这样当我升级到 v3.1 时，它无论如何都会更新。

【讨论】：

Bootstrap 2 用户注意事项：我们在这里遇到了同样的问题，scrowler 的解决方案立即解决了这个问题！是的，您可以在 Bootstrap 2 的剥离表中使用danger（和其他）分类行，通过这个小修复。可惜我只能给你+1，因为你的解决方案很棒！

【解决方案2】：

看起来这是 v3.0.3 中的一个已知错误，将在 v3.1.0 中修复

https://github.com/twbs/bootstrap/issues/11728

现在我只是要删除 class: table-striped 以使颜色再次出现。

【讨论】：

【解决方案3】：

相关错误... 在 Bootstrap 2.1.0 中，“tr.warning”被省略了，所以 bootstrap.css 是

.table tbody tr.success td {
  background-color: #dff0d8;
}
.table tbody tr.error td {
  background-color: #f2dede;
}
.table tbody tr.info td {
  background-color: #d9edf7;
}

但它应该看起来像：

.table tbody tr.success td {
  background-color: #dff0d8;
}
.table tbody tr.error td {
  background-color: #f2dede;
}
.table tbody tr.info td {
  background-color: #d9edf7;
}
.table tbody tr.warning td {
  background-color: lightgoldenrodyellow;
}

注意“tr.warning”的颜色选择是我的选择，而不是 Bootstrap 默认颜色。

【讨论】：

【解决方案4】：

如果您使用 LESS 并构建自己的引导程序，我建议将 !important 添加到 bg-variant-mixin：

// Fix for known bug bg-variant, fixes issues with striped tables
.bg-variant(@color) {
    background-color: @color !important;
    a&:hover,
    a&:focus {
        background-color: darken(@color, 10%) !important;
    }
}

【讨论】：