15

我有一个表定义<table class="table table-striped">了一些行，如<tr class="success">,<tr class="info">和<tr class="warning">.

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

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

4

4 回答 4

14

关于 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, tfootetc 和success, etc 。info我只在使用danger，而且只在tbody. 我将这些修改放在我的 bootstrap.css 文件中，这样当我升级到 v3.1 时，它无论如何都会更新。

于 2014-01-30T01:33:18.143 回答
5

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

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

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

于 2013-12-11T12:26:01.993 回答
0

相关错误...在 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 默认颜色。

于 2014-12-05T14:24:54.767 回答
0

如果您使用 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;
    }
}
于 2017-09-07T10:06:40.543 回答