html – 使用Bootstrap 3如何隐藏表格中的列?
发布时间:2020-12-14 21:26:04 所属栏目:资源 来源:网络整理
导读:在col-xs和col-sm中,我正试图为响应式设计隐藏列。我首先尝试使用hidden-xs / hidden-sm类,但这不起作用。我也试过使用这里提到的可见桌面: Twitter Bootstrap Responsive – Show Table Column only on Desktop 这也行不通。做这个的最好方式是什么?我
在col-xs和col-sm中,我正试图为响应式设计隐藏列。我首先尝试使用hidden-xs / hidden-sm类,但这不起作用。我也试过使用这里提到的可见桌面:
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> 解决方法
代码应该可以正常工作。 Bootstrap支持使用其响应实用程序类
https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504隐藏/显示th和td:
// 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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |