twitter-bootstrap Bootstrap 响应表不会在 iOS 设备上垂直滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21706505/
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
Bootstrap responsive table not scrolling vertically on iOS devices
提问by DemCodeLines
This is what I have:
这就是我所拥有的：
<div class="table-responsive">
<table class="table" style="background: transparent">
....
</table>
</div>
I am using the following bootstrap.css file: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
我正在使用以下 bootstrap.css 文件：http: //netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
When I try to scroll up and down on an iOS device (while my finger is touching the table), it doesn't scroll. It just drags the whole page up and down. I have to touch the body background or any other object, other than the table, in order to scroll. This problem doesn't come up in Android devices, but it seems to be there on iOS devices, like iPhone.
当我尝试在 iOS 设备上上下滚动时（当我的手指触摸桌子时），它不滚动。它只是上下拖动整个页面。我必须触摸身体背景或任何其他对象，而不是桌子，才能滚动。此问题不会出现在 Android 设备中，但似乎出现在 iOS 设备上，例如 iPhone。
I tried adding overflow-y: autoto <div class="table-responsive">, but it still didn't work.
我尝试添加overflow-y: auto到<div class="table-responsive">，但它仍然不起作用。
What do I need to add in order to enable scrolling on mobile devices (Apple devices, specifically)?
我需要添加什么才能在移动设备（特别是 Apple 设备）上启用滚动？
回答by Luccas Correa
For anyone else having this problem, all I had to do to solve it was to add the following line to the css of the table-responsive class:
对于遇到此问题的其他人，我所要做的就是将以下行添加到 table-responsive 类的 css 中：
-webkit-overflow-scrolling: touch;
And now it works as expected.
现在它按预期工作。
回答by RJM
I had the same problem then I removed overflow: hidden;from html and body.
The behavior of Safari on IOS matched the behavior of Chrome on Android, ie, the page was scrolling vertically again. Check and see if a parent of .table-responsive has overflow-hiddenand try commenting it out.
我遇到了同样的问题，然后我overflow: hidden;从 html 和 body 中删除了。IOS 上Safari 的行为与Android 上Chrome 的行为一致，即页面再次垂直滚动。检查并查看 .table-responsive 的父级是否具有overflow-hidden并尝试将其注释掉。
I'm still looking for a better solution that will not force me to alter the CSS of parent elements.
我仍在寻找一个更好的解决方案，它不会强迫我改变父元素的 CSS。
[EDIT]
[编辑]
Found it. You don't need to change the overflow value on the parent of .table-responsive, just make sure you add
找到了。您不需要更改 .table-responsive 的父级上的溢出值，只需确保添加
parent {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
回答by tgbrunet
This only makes tables scroll horizontally. Vertically scrolling with tables is not apart of Twitter Bootstrap.
这只会使表格水平滚动。垂直滚动表格不是 Twitter Bootstrap 的一部分。
Check out their documentation for more information: Responsive Tables under the CSS Tab
查看他们的文档以获取更多信息：CSS 选项卡下的响应表
