twitter-bootstrap 如何使用 Bootstrap 在移动设备上显示表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14846026/
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
How to display tables on mobile using Bootstrap?
提问by ta.speot.is
My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.
我的表格在桌面上显示良好，但是一旦我尝试查看移动版本，我的表格最终对于移动设备屏幕来说太宽了。我正在使用响应式布局。
How can I set table widths for mobile view? What other alternatives are there to present tabular data on mobile views using Bootstrap?
如何为移动视图设置表格宽度？还有哪些其他替代方法可以使用 Bootstrap 在移动视图上显示表格数据？
回答by ta.speot.is
Bootstrap 3 introduces responsive tables:
Bootstrap 3 引入了响应式表：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Bootstrap 4 is similar, but with more control via some new classes:
Bootstrap 4 类似，但通过一些新类提供更多控制：
...responsive across all viewports ... with
.table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using.table-responsive{-sm|-md|-lg|-xl}.
...响应所有视口 ... 与
.table-responsive. 或者，选择一个最大断点，使用.table-responsive{-sm|-md|-lg|-xl}.
Credit to Jason Bradleyfor providing an example:
信贷贾森·布拉德利提供一个例子：
回答by Chords
You might also consider trying one of these approaches, since larger tables aren't exactly friendly on mobile even if it works:
您也可以考虑尝试其中一种方法，因为即使工作正常，较大的表格在移动设备上也不是完全友好：
http://elvery.net/demo/responsive-tables/
http://elvery.net/demo/responsive-tables/
I'm partial to 'No More Tables' but that obviously depends on your application.
我偏爱“No More Tables”，但这显然取决于您的应用程序。
回答by Matt Busche
All tables within bootstrap stretch according to the container they're in. You can put your tables inside a .spanelement to control the size. This SO Question may help you out
bootstrap 中的所有表格都根据它们所在的容器进行拉伸。您可以将表格放在.span元素中以控制大小。这个问题可能会帮助你
