移动视图中的bootstrap-table hide列

Question

我有一个复选框列,它只能在桌面上显示,而不能在Mobile或Tabs上显示.

文档中没有可用的选项来隐藏/显示基于设计的任何列.

我们可以这样做吗？

Answer 1

您可以使用以下内容

hidden-sm : Hidden on small devices ( Tablets ( >= 768 px))
hidden-xs: Hidden on extra small devices ( Phones ( <768 px))

例

<th class="hidden-xs hidden-sm">Your Column</th>

<td class="hidden-xs hidden-sm">Value </td>

Answer 2

Bootstrap 之后的v4.0+一个好方法是

<th scope="col" class="d-none d-sm-table-cell">Column</th>

d-none隐藏 XS（移动）视口上的元素并d-sm-table-cell保持其可见 SM 向前（平板电脑和更大的）

Answer 3

我可能会迟到，但我一直在使用引导程序的 .d 类进行移动友好的开发来隐藏/显示一些东西，希望这会有所帮助！ 引导程序 4

这是表的codepen示例

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<h2>Good Table</h2>

<table class="table">
    <thead>
        <tr>
            <th style="display:none">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 2.1</td>
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 3.1</td>
            <td>Data 3.2</td>
            <td>Data 3.3</td>
        </tr>
    </tbody>
</table>

<h2>Bad Table</h2>

<table class="table">
    <thead>
        <tr>
            <th style="display:none">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td>Data 2.1</td>
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 3.1</td>
            <td>Data 3.2</td>
            <td>Data 3.3</td>
        </tr>
    </tbody>
</table>

Answer 4

现在已完成（4.2），如此处所述：https : //getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

对于表格单元格，您必须使用例如

<th class="d-none d-lg-table-cell">

这只会在向上的大显示屏上显示表格单元格。

Answer 5

使用该hideColumn()方法隐藏所需的列，并在视口转到移动设备时通过 JavaScript 或 JQuery 触发它。

这是您的问题的相关问题示例： https://github.com/wenzhixin/bootstrap-table-examples/blob/master/issues/220.html