使用 Bootstrap 4 隐藏表格列 [英] Hide Table Columns using Bootstrap 4

问题描述

我知道 Bootstrap 4 使用新的显示实用程序来显示或隐藏基于信息的在屏幕尺寸上.我的问题是如何使这些与表格一起工作?由于屏幕尺寸较小，我想删除列.

I know that Bootstrap 4 uses new display utilities to show or hide information based on the screen size. My question is how to make these work with a table? I want to remove columns as the screen size is smaller.

我使用了d-xs-none"，但没有任何效果.但是，当我使用d-sm-none"时，当大小为sm"或更大(与我需要的完全相反)时，列将被删除.如果我尝试d-none d-xs-none"，则该列永远不会出现.如:<th class="text-center d-none d-xs-none" scope="col">Location</th>

I have used "d-xs-none" and it does not have any effect. However, when I use "d-sm-none" the column is removed when the size is 'sm' or larger (the exact opposite of what I need). If I try "d-none d-xs-none" the column never shows up. As in: <th class="text-center d-none d-xs-none" scope="col">Location</th>

基本上，您能展示一个在将浏览器调整为移动设备时隐藏表格列的示例吗?感谢您的帮助！

Basically, can you show me an example of hiding a table column when resizing the browser to a mobile device? Thank you for your help!

推荐答案

尝试使用 d-none d-sm-table-cell 用于表格列.具有这些类的列不会显示在 xs 上.

Try using d-none d-sm-table-cell for table columns. Colums having these classes won't be shown on xs.

这篇关于使用 Bootstrap 4 隐藏表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！