Question

我的表定义为<table class="table table-striped">，其中包含<tr class="success">，<tr class="info">和<tr class="warning">等行。

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

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

Answer 1

关于v3.0.3的这个问题（将在v3.1中修复，无论何时发布），对此问题的快速/粗略修复是针对此问题向某些特定CSS添加!important覆盖：

.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时它仍然会更新。

Answer 2

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

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

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

Answer 3

相关错误... 在Bootstrap 2.1.0中，＆＃34; tr.warning＆＃34;被遗漏了，所以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;
}

注意＆＃34; tr.warning＆＃34;的颜色选择是我的选择，而不是Bootstrap的默认颜色。

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

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

4 个答案: