使用Bootstrap 3如何隐藏表格中的列？

Question

我试图隐藏列我响应式设计的时候col-xs和col-sm.我首先尝试使用hidden-xs/hidden-sm类,但这不起作用.我也尝试使用visible-desktop这里提到的:Twitter Bootstrap Responsive - 仅在桌面上显示表列

这也行不通.做这个的最好方式是什么？我宁愿不做两个单独的表然后隐藏一个或另一个.

我试过的代码当前没有用:

<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>

Answer 1

代码应该可以正常工作.引导支持隐藏/显示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/

Answer 2

它似乎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>