30

我试图在col-xs和中隐藏我的响应式设计的列col-sm。我首先尝试使用hidden-xs/hidden-sm类，但这没有用。我也尝试过使用visible-desktop这里提到的：Twitter Bootstrap Responsive - Show Table Column only on Desktop

那也没用。做这个的最好方式是什么？我宁愿不制作两个单独的表格，然后隐藏其中一个。

我试过的代码目前不起作用：

<table>
    <thead>
        <th>Show All the time</th>
        <th class="hidden-xs hidden-sm">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="hidden-xs hidden-sm">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>
4

3 回答 3

19

由于接受的答案有很多赞成票，因此它似乎hidden-xs/hidden-sm以前有效，但是当我调整区域大小时，小提琴示例对我不起作用。对我有用的是使用相反的逻辑visible-md/visible-lg。我不明白为什么，因为根据文档 Bootstrap 仍应支持hidden-xs/hidden-sm。

工作小提琴：http: //jsfiddle.net/h1ep8b4f/ 

<table>
    <thead>
        <th>Show All the time</th>
        <th class="visible-md visible-lg">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="visible-md visible-lg">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>
于 2016-08-10T09:00:59.190 回答
16

代码应该可以正常工作。Bootstrap 支持隐藏/显示th及其td响应式实用程序类https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504：

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
  display: block !important;
  tr& { display: table-row !important; }
  th&,
  td& { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
  tr& { display: none !important; }
  th&,
  td& { display: none !important; }
}

代码在这个 jsFiddle 中工作：http: //jsfiddle.net/A4fQP/

于 2013-08-21T18:52:59.910 回答
2

我最近遇到了一个类似的问题，根据屏幕大小以不同的方式显示表格。我的任务是在更大的屏幕上隐藏一列并在移动设备上显示它同时隐藏其他三列（“一”列是“三”列中数据的总和。就像上面的响应一样，我使用了媒体查询，但完全丢弃了引导程序的预制视图。我在所涉及的th和td标签中添加了类。

看起来很像这样：

.full_view {
width: 50px;
  @media(max-width: 768px){
    display: none;
  }
}

.small_view {
  width: 50px;
  @media(min-width: 768px){
    display: none;
  }
}
于 2014-02-24T18:32:01.983 回答