Question

我有一个包含以下标记的表：

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

正如文档所说，我的表现在应该能够水平滚动。如果我使用chrome的设备模拟器，它确实有效。然而，当我尝试使用真正的iPhone（在这种情况下为iPhone 5s - 在iPhone 6上测试过）时，我根本无法水平滚动桌面。我可以看到默认情况下在视口中显示的最后一列，我只是不能侧向滚动它。我在我的iPhone上使用chrome和safari尝试过这种行为。

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

我不确定这是否重要，但我也有一个引导插件 - offcanvas - jasny bootstrap并且我无法在我的iPhone上垂直滚动该侧边菜单。这一切都在仿真器中运行，但在真实的情况下失败。

也许那两个人以某种方式联系在一起。

感谢任何帮助。

编辑：

我刚刚在Android手机上测试了它，好像我可以按预期水平滚动表格。但是，即使在android上，我仍然无法垂直滚动侧边菜单。我想这意味着这些问题并没有相互联系。

Answer 1

我发现默认情况下.table元素有max-width: 100%而safari“尊重”这个，所以它将宽度设置为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响应表不会在iOS设备上水平滚动

编辑：

2 个答案: