twitter-bootstrap Bootstrap 响应表不会在 iOS 设备上水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33772862/
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 doesn't scroll horizontally on iOS devices
提问by kfirba
I have a table with the following markup:
我有一个带有以下标记的表：
<div class="table-responsive"
<table class="table table-hover"
<!-- table data-->
</table>
</div>
As the documentation says, my table should now be able to scroll horizontally. It does work if I use chrome's devices emulator. However, when I try it using a real iPhone (iPhone 5s in this case - tested on iPhone 6 as-well) then I can't scroll the table horizontally at all. I can see the last column displayed in the viewport by default and I just can't scroll it side ways. I tried that in chrome and safari on my iPhone and got the same behavior.
正如文档所说，我的表格现在应该能够水平滚动。如果我使用 chrome 的设备模拟器，它确实有效。但是，当我使用真正的 iPhone（在这种情况下是 iPhone 5s - 在 iPhone 6 上也进行了测试）尝试它时，我根本无法水平滚动表格。默认情况下，我可以看到视口中显示的最后一列，但我无法将其横向滚动。我在 iPhone 上的 chrome 和 safari 中尝试过，得到了相同的行为。
What I tried to do is add the -webkit-overflow-scroll: touchbut it didn't solve the problem. I've also tried to manually add overflow-x: scrollinstead of the default autobut no avail.
我试图做的是添加-webkit-overflow-scroll: touch但它没有解决问题。我也尝试手动添加overflow-x: scroll而不是默认添加auto但无济于事。
I'm not sure it matters but I also have a bootstrap plugin - offcanvas - by jasny bootstrapand I can't scroll that side menu vertically on my iPhone as-well. It all works in the emulators but fails on the real thing.
我不确定这是否重要，但我也有一个引导插件 - offcanvas - by jasny bootstrap，我也无法在 iPhone 上垂直滚动该侧边菜单。这一切都在模拟器中工作，但在真实的东西上却失败了。
Maybe those two are connected somehow.
也许这两者有某种联系。
Any help is appreciated.
任何帮助表示赞赏。
Edit:
编辑：
I have just tested that on an android phone and it seems like I can scroll the table horizontally as expected. However, I still can't scroll the side menu vertically even on android. I guess it means that these problems aren't connected to each other.
我刚刚在 android 手机上测试过，似乎我可以按预期水平滚动表格。但是，即使在 android 上，我仍然无法垂直滚动侧边菜单。我想这意味着这些问题彼此之间没有联系。
回答by kfirba
I found out that by default the .tableelement has max-width: 100%and safari "respects" this so it set the width to be 100% which means that the .tableelement isn't overflowing the .table-responsiveelement hence causing it to not be scrollable. This somehow doesn't affect android phones.
我发现默认情况下，.table元素具有max-width: 100%并且 safari“尊重”这一点，因此它将宽度设置为 100%，这意味着.table元素不会溢出.table-responsive元素，因此导致它不可滚动。这在某种程度上不会影响安卓手机。
The fix was rather easy:
修复相当简单：
.table-responsive .table {
max-width: none;
}
回答by Rana Nematollahi
.table-responsive .table {
max-width: none;
-webkit-overflow-scrolling: touch !important;
}
