twitter-bootstrap Twitter Bootstrap 响应式 - 仅在桌面上显示表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16546267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Responsive - Show Table Column only on Desktop
提问by Santiago
I'm using DataTables.net + Twitter Bootstrap and the responsive layout, what I'm trying is to hide some columns of the table using the class "visible-desktop" thats shows the columns only in big sizes but It seems not to work, hides well but if I resize the windows to get a desktop width the columns hidden start showing stacked, seems a CSS display class problem, because inherits the type of display from the parent:
我正在使用 DataTables.net + Twitter Bootstrap 和响应式布局，我正在尝试使用“visible-desktop”类隐藏表格的某些列，该类仅以大尺寸显示列，但似乎不起作用, 隐藏得很好，但是如果我调整窗口大小以获得桌面宽度，隐藏的列开始显示堆叠，似乎是 CSS 显示类问题，因为从父级继承了显示类型：
.visible-desktop {
display: inherit!important;
}
If I manipulate it to
如果我操纵它
.visible-desktop {
display: table-cell!important;
}
works well... Is there a workaround for this? Or I have to write my own class for table column hiding?
效果很好......有解决方法吗？或者我必须为表列隐藏编写自己的类？
回答by DeBraid
Version 4
版本 4
EDIT: Bootstrap 4 removed hiddenand visibleclasses, see this answerfor updated examples, and/or related official migration guide.
编辑：删除了 Bootstrap 4hidden和visible类，请参阅此答案以获取更新的示例和/或相关的官方迁移指南。
** Old Answer for Bootstrap 3 below **
** 下面是 Bootstrap 3 的旧答案 **
Version 3
版本 3
Available classes for .visibleand .hidden.
可用类.visible和.hidden。
Use a single or combination of the available classes for toggling content across viewport breakpoints.
使用单个或可用类的组合跨视口断点切换内容。
From Bootstrap section here http://getbootstrap.com/css/#responsive-utilities-classes
从这里的 Bootstrap 部分http://getbootstrap.com/css/#responsive-utilities-classes
回答by Santiago
I finally found that exists a workaround replacing:
我终于发现存在一种替代方法：
visible-desktop
by
经过
hidden-phone hidden-tablet
Hope helps someone!
希望对某人有所帮助！
回答by Joel AZEMAR
On Boostrap 3.0 use .visibilty-<size>or .hidden-<size>responsive classes as described in the official doc.
在 Boostrap 3.0 上使用.visibilty-<size>或.hidden-<size>响应类，如官方文档中所述。
