Bootstrap: "предупреждение" tr-класса не работает в полосатом столе

У меня есть таблица, определенная <table class="table table-striped"> с некоторыми строками типа <tr class="success">, <tr class="info"> и <tr class="warning">.

Строки таблицы success и info отображаются в порядке: красный и синий, как и должно быть. Но строки warning не отображаются желтым, как ожидалось. Они просто обычные, зебра-полоса белого или серого цвета.

Странно, если я добавлю table-hover в классы таблиц, строки warning будут желтыми, но только при наведении курсора. Однако строки success и info всегда показывают свои цвета, наведите указатель мыши или нет.

Ответ 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, он все равно обновится.

Ответ 2

Похоже, что это ошибка в версии v3.0.3 и будет исправлена в версии v3.1.0

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

Теперь я просто удалю класс: 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 и создаете свой собственный bootstrap, я предлагаю добавить !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;
    }
}