使用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屋！