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

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;
}