twitter-bootstrap - Bootstrap table-condensed 仅适用于 xs

Question

我正在尝试使用 table-condensed，但仅在 xs.我试过这个，但没有运气。

<table class="hidden-xs table">
<table class="hidden-sm hidden-md hidden-lg table table-condensed">

它隐藏了第二张 table 的整个 table 。有没有一种方法可以只在 xs 中压缩而不重复整个表结构？

Answer 1

table-condensed除了更改填充之外，不做任何事情。与其复制表格，不如添加您自己的在最小 (xs) 断点处工作的 CSS 类。

@media (max-width: 768px) {
  .table-condensed-xs > thead > tr > th,
  .table-condensed-xs > tbody > tr > th,
  .table-condensed-xs > tfoot > tr > th,
  .table-condensed-xs > thead > tr > td,
  .table-condensed-xs > tbody > tr > td,
  .table-condensed-xs > tfoot > tr > td {
    padding: 5px;
  }
}

http://codeply.com/go/5ndhSVOeeh

或者，您可以覆盖现有的 table-condensed这样的课。。

@media (min-width: 768px) {
  .table-condensed > thead > tr > th,
  .table-condensed > tbody > tr > th,
  .table-condensed > tfoot > tr > th,
  .table-condensed > thead > tr > td,
  .table-condensed > tbody > tr > td,
  .table-condensed > tfoot > tr > td {
    padding: 10px;
  }
}