jQuery-bootgrid 如何仅在 Mobile 和 Tab 中隐藏列

【问题标题】：jQuery-bootgrid how to hide column only in Mobile and TabjQuery-bootgrid 如何仅在 Mobile 和 Tab 中隐藏列
【发布时间】：2015-10-05 22:34:14
【问题描述】：

我想隐藏 Tab 中的数据列。我推荐了Bootgrid Documentation。

在我找到的列设置中。

data-visible="false"

它也隐藏了PC中的数据列。我需要类似的东西

 .hidden-xs, .hidden-sm

【问题讨论】：

您是否尝试过使用媒体查询，例如@media screen and (max-width : 320px){ display: none; }
我将 css 类添加到 '@media 屏幕和 (max-width : 320px){ .data-column{ display: none; } }' 它只隐藏列标题而不是整个列
可以发布您的问题的代码/小提琴

标签： jquery twitter-bootstrap jquery-plugins jquery-bootgrid

【解决方案1】：

有两个名为 cssClass 和 headerCssClass 的列设置完全按照您的要求进行。如果在列标题数据属性中设置hidden-xs 和hidden-sm 类，则该列将在小型设备上隐藏。请注意，数据属性分别称为 data-css-class 和 data-header-css-class。

<thead>
    <tr>
        <th data-column-id="id" data-visible="false">ID</th>
        <th data-column-id="firstname">First Name</th>
        <th data-column-id="lastname" data-order="asc">Last Name</th>
        <th data-column-id="registerdate" 
            data-css-class="hidden-xs hidden-sm" 
            data-header-css-class="hidden-xs hidden-sm">Date</th>
    </tr>
</thead>

【讨论】：