使用Bootstrap 3我怎样才能隐藏我的表中的列？ [英] Using Bootstrap 3 how can I hide columns in my table?

问题描述

我试图在 col-xs 和 col-sm 中隐藏我的自适应设计的列。我第一次尝试使用 hidden-xs / hidden-sm 类，但这不起作用。我也尝试使用 visible-desktop ，如下所述： Twitter Bootstrap响应式 - 仅在桌面上显示表列

这也行不通。做这个的最好方式是什么？我宁愿不制作两个独立的桌子，然后隐藏其中一个或另一个。

代码我尝试过，目前没有工作：

 <表> 
< thead> 
< th>显示所有时间< / th> 
< th class =hidden-xs hidden-sm>隐藏在XS和SM中< / th> 
< / thead> 
< tbody> 
< tr> 
< td>显示所有时间< / td> 
< td class =hidden-xs hidden-sm>隐藏在XS和SM中< / td> 
< / tr> 
< / tbody> 
< / table> 
  

解决方案

代码应该可以正常工作。 Bootstrap支持使用其响应式实用程序类 th 和 td 。 com / twbs / bootstrap / blob / master / less / mixins.less＃L504rel =noreferrer> https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504 ：

  //响应工具
 // -------------- ----------- 
 //更容易包含所有用于响应式utilities.less的状态。 
 .responsive-visibility（）{
 display：block！important; 
 tr& {display：table-row！important; } 
 th&; 
 td& {display：table-cell！important; } 
} 
 
。响应式隐藏（）{
 display：none！important; 
 tr& {display：none！important; } 
 th&; 
 td& {display：none！important; } 
} 
  

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

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.

Code I tried that's not currently working:

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

解决方案

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

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

这篇关于使用Bootstrap 3我怎样才能隐藏我的表中的列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！