bootstrap-table 在移动视图中隐藏列

Posted 2023-05-08

【中文标题】bootstrap-table 在移动视图中隐藏列

【英文标题】：bootstrap-table hide column in mobile view

【发布时间】：2016-11-07 14:43:23

【问题描述】：

我有一个复选框列，它应该只在桌面上可见，而不是在移动设备或标签上。

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

我们可以这样做吗？

【参考方案1】：

现在（4.2）按照此处的说明完成：https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

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

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

这将只在大屏幕上显示表格单元格。

【讨论】：

有用的答案！ bs5 链接：getbootstrap.com/docs/5.0/utilities/display/#hiding-elements 并快速提醒您必须将此类也应用于

元素

【参考方案2】：

你可以使用下面的

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>

【讨论】：

不确定 OP 但这正是我想要的

这是针对 Bootstrap 3.x 的，请参阅 4.x 方法的其他回复

【参考方案3】：

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

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

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

【讨论】：

是的！我把我的桌子弄乱了，把d-sm-block而不是d-sm-table-cell

【参考方案4】：

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

【参考方案5】：

使用hideColumn() 方法隐藏您想要的列，并在视口进入移动设备时通过 javascript 或 JQuery 触发它。

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

【参考方案6】：

对于 Bootstrap 4，请使用 .d-* classes。 例如。 <th class="d-block d-sm-none" ..> 仅在小型设备上显示一列。

此示例 https://live.bootstrap-table.com/code/marceloverdijk/3269 显示国家列，对于 sm(all) 设备，它显示 2 个字符代码，如 US，对于非小型设备，它显示 United States。

【讨论】：

这是隐藏元素的一般方式，但表格列不应该显示为块，否则它不会对齐，而是会覆盖所有可用区域（作为块div元素）

【参考方案7】：

我认为visible 和cardVisible 选项可以帮助您：http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options。

【讨论】：

这无济于事，因为data-visible 只有true 或false 选项；没有任何响应/设备相关。