Twitter Bootstrap 响应式 - 仅在桌面上显示表格列

Posted 2023-05-07

【中文标题】Twitter Bootstrap 响应式 - 仅在桌面上显示表格列

【英文标题】：Twitter Bootstrap Responsive - Show Table Column only on Desktop

【发布时间】：2013-05-08 21:59:30

【问题描述】：

我正在使用 DataTables.net + Twitter Bootstrap 和响应式布局，我正在尝试使用“可见桌面”类隐藏表格的某些列，该类仅以大尺寸显示列，但似乎不工作，隐藏得很好，但是如果我调整窗口大小以获得桌面宽度，隐藏的列开始显示堆叠，似乎是 CSS 显示类问题，因为从父级继承显示类型：

.visible-desktop 
    display: inherit!important;

如果我操纵它来

.visible-desktop 
    display: table-cell!important;

效果很好...有解决方法吗？还是我必须编写自己的表列隐藏类？

【参考方案1】：

版本 4

编辑：Bootstrap 4 删除了 hidden 和 visible 类，请参阅 this answer 以获取更新的示例，和/或相关的 official migration guide。

** 下面 Bootstrap 3 的旧答案 **

版本 3

.visible 和 .hidden 的可用类。

使用单个或组合可用的类来跨视口断点切换内容。

来自此处的引导部分http://getbootstrap.com/css/#responsive-utilities-classes

【讨论】：

这不能回答问题。因为这些类添加的 CSS 样式允许设置：display、display-block、display-inline。他在询问“table-cell”以及是否有更好的方法来使用 BS（不添加自定义样式）。

似乎谷歌一直抛出这个线程来回答关于 Bootstrap 中 visible/hidden 类的问题（基于原始答案收到的频繁投票）。

仅供参考 以上内容已从 bootstrap 版本 4 中删除。

【参考方案2】：

我终于发现存在一种替代方法：

visible-desktop

通过

hidden-phone hidden-tablet

希望能帮助别人！

【讨论】：

接受自己的答案是可以的，说明是正确的。

我必须说这个答案只适用于 Boostrap 2，当我问的时候，Boostrap 3 并不存在。

【参考方案3】：

在 Boostrap 3.0 上使用 .visibilty-<size> 或 .hidden-<size> 响应类，如官方文档中所述。

http://getbootstrap.com/css/#responsive-utilities-classes