Bootstrap 响应式 table 不会在 iOS 设备上水平滚动

Question

我有一个带有以下标记的 table：

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

如文档所述，我的 table 现在应该可以水平滚动了。如果我使用 chrome 的设备模拟器，它确实有效。但是，当我尝试使用真实的 iPhone（在本例中为 iPhone 5s - 同样在 iPhone 6 上进行测试）时，我无法水平滚动 table根本。默认情况下，我可以看到最后一列显示在视口中，但我无法将其横向滚动。我在 chrome 和我的 iPhone 上的 safari 中尝试过，并得到了相同的行为。

我试图做的是添加 -webkit-overflow-scroll: touch 但它没有解决问题。我也尝试手动添加 overflow-x: scroll 而不是默认的 auto 但无济于事。

我不确定这是否重要，但我还有一个 bootstrap 插件 - offcanvas - 由 jasny bootstrap 开发，我无法在 iPhone 上垂直滚动侧边菜单-出色地。这一切在模拟器中都有效，但在真实的东西上却失败了。

也许这两者有某种联系。

感谢任何帮助。

编辑：

我刚刚在 android phone 上测试过，似乎我可以按预期水平滚动 table。但是，即使在 android 上，我仍然无法垂直滚动侧边菜单。我想这意味着这些问题彼此无关。

Answer 1

我发现默认情况下 .table 元素有 max-width: 100% 和 safari "respects" 所以它将宽度设置为 100% 这意味着 .table元素没有溢出 .table-responsive 元素，因此导致它不可滚动。这不知何故不会影响 android 手机。

修复相当简单：

.table-responsive .table {
    max-width: none;
}

Answer 2

.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}

Bootstrap 响应式 table 不会在 iOS 设备上水平滚动

Bootstrap responsive table doesn't scroll horizontally on iOS devices

css

twitter-bootstrap

twitter-bootstrap-3

responsive-design

jasny-bootstrap

编辑：