Bootstrap响应表不能在iOS设备上垂直滚动 [英] Bootstrap responsive table not scrolling vertically on iOS devices

问题描述

这是我有的：

<div class="table-responsive">
    <table class="table" style="background: transparent">
        ....
    </table>
</div>

我使用以下bootstrap.css文件：http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css

I am using the following bootstrap.css file: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css

当我尝试在iOS设备上向上和向下滚动时（当我的手指触摸表格时），它不滚动。它只是拖动整个页面上下。我必须触摸身体背景或任何其他对象，除了表，以滚动。

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.

我试过添加 overflow-up，但是这个问题没有出现在Android设备上， y：auto 到< div class =table-responsive> ，但它仍然不起作用。

I tried adding overflow-y: auto to <div class="table-responsive">, but it still didn't work.

我需要添加什么才能在移动设备（尤其是Apple设备）上启用滚动？

What do I need to add in order to enable scrolling on mobile devices (Apple devices, specifically)?

推荐答案

对于任何其他有这个问题的人，我只需要添加以下行到表响应类的css：

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:

-webkit-overflow-scrolling: touch;

现在可以按预期工作。

这篇关于Bootstrap响应表不能在iOS设备上垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！