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

问题描述

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

I'm trying to hide columns for my responsive design when in col-xs and col-sm. I first attempted to use hidden-xs/hidden-sm classes, but this didn't work. I also tried using visible-desktop as mentioned here: Twitter Bootstrap Responsive - Show Table Column only on Desktop

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

That also didn't work. What is the best way to do this? I rather not make two separate tables and then hide one or the other.

我尝试过但目前无法运行的代码:

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

推荐答案

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

The code should work just fine. Bootstrap supports hiding/showing th and td with its responsive utility classes 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/

The code works in this jsFiddle: http://jsfiddle.net/A4fQP/

这篇关于使用 Bootstrap 3 如何隐藏表格中的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！