Question

我正在尝试在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>

Answer 1

代码应该可以正常工作。 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/

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>

Answer 3

我最近遇到了类似的问题，根据屏幕尺寸，以不同方式显示表格。我的任务是在较大的屏幕上隐藏一列并在移动设备上显示它，同时隐藏其他三列（'one'列是'三'列中的数据总和。就像上面的响应，我使用了媒体查询，但完全处理了bootstrap的预制视图。我在所涉及的th和td标签中添加了类。

看起来非常像这样：

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

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

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

3 个答案: