Twitter Bootstrap Responsive - 仅在桌面上显示表列

问题描述 投票:12回答:3

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

.visible-desktop {
    display: inherit!important;
}

如果我操纵它

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

效果很好......这有解决方法吗?或者我必须为表列隐藏编写自己的类?

twitter-bootstrap datatables hide multiple-columns
3个回答
29
投票

Version 4

编辑:Bootstrap 4删除了hiddenvisible类,请参阅this answer以获取更新示例和/或相关的official migration guide

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

Version 3

.visible.hidden的可用课程。

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

从Bootstrap部分这里http://getbootstrap.com/css/#responsive-utilities-classes


21
投票

我终于发现存在一个替代方法:

visible-desktop

通过

hidden-phone hidden-tablet

希望帮助别人!


11
投票

在Bootstrap 3.0上使用官方文档中描述的qazxsw poi或qazxsw poi响应类。

.visibilty-<size>

© www.soinside.com 2019 - 2024. All rights reserved.