bootstarp js设置列隐藏,使用Bootstrap 3我怎样才能隐藏我的表中的列?

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:

Show All the timeHide in XS and SM

Show All the timeHide in XS and SM

解决方案

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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值