Question

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

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

它为第二个隐藏整个表格。有没有办法只能在xs中压缩而不重复整个表结构？

Answer 1

table-condensed除了更改填充之外没有其他任何操作。而不是复制表，最好添加自己的CSS类，该类在最小（xs）断点处工作..

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

Answer 2

简短回答否。使用本机引导程序，您无法基于hidden-*标记操纵其他类。

如果您只想table-condensed xs，则需要使用visible-xs-block重复该代码，并使用hidden-xs标记不需要的代码。

您可以编写自定义CSS，或者使用jQuery执行此操作，然后抓取$('table.visible-xs-block')并向其添加课程table-condensed：$('table.visible-xs-block').addClass('table-condensed')。这应该有效，标记来自我的记忆，所以根据你的需要进行调整。

Bootstrap表 - 仅针对xs进行压缩

2 个答案: