Bootstrap-Table如何在移动设备中隐藏列？

Question

Bootstrap-Table如何在移动设备中隐藏列？

bootstrap-table

28

我有一个复选框列，在桌面上应该可见，但在移动设备或平板电脑上不应该可见。

文档中没有任何可用选项可以根据设备隐藏/显示任何列。

我们能做到这一点吗？

- Nikunj Thakkar

8个回答

19

您可以使用以下内容

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>

- Monah

不确定OP是否满意，但这正是我在寻找的。 - Jeff

2

这是针对Bootstrap 3.x的，查看其他回复获取4.x方法。 - andrerom

14

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

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

d-none 隐藏元素在XS（移动设备）视口上，而 d-sm-table-cell 从SM（平板电脑及更大设备）开始保持可见。

- Luiz Eduardo

耶！我把d-sm-block写成了d-sm-table-cell，搞乱了我的表格。 - fellyp.santos

8

我可能来晚了，但我一直在使用 Bootstrap 的 .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>

- pk_code

0

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

以下是一个与你的问题相关的问题示例： https://github.com/wenzhixin/bootstrap-table-examples/blob/master/issues/220.html

- Kevin Quach

0

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

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

- Marcel Overdijk

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

0

来自 Bootstrap 的显示属性文档：https://getbootstrap.com/docs/5.0/utilities/display/

在 sm 及更宽屏幕上隐藏在小于 sm 的屏幕上隐藏

- Walt Kraybill

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Jeremie

-1

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

- wenyi

这并没有帮助，因为 data-visible 只有 true 或 false 选项，与响应式/设备相关的内容并没有涉及。 - Marcel Overdijk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Klaus · Accepted Answer

现在 (4.2) 的做法如下所述：https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

对于表格单元格，您需要使用例如

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

这将仅在大尺寸显示器及更高级别上显示表格单元格。