Bootstrap Modal在iOS设备上不起作用

Question

我正在使用Bootstrap在一个网站上工作并遇到一个我似乎无法修复的问题。这是draft of the site。

关于＆＃34;我们做什么＆＃34;面板，我在第一个缩略图框上创建了一个可点击的模态窗口（它表示＆＃34;企业软件开发＆＃34;缩略图下）。如果单击非移动设备上的缩略图，将弹出一个模态窗口。

在台式计算机（或笔记本电脑）上，它运行正常。但是在iOS（iPhone，iPad等）上它根本不起作用：即点击它并不会调出模态窗口。

但是，如果你在页面上看起来更低，那么我们是谁？＃34;小组，有一个＆＃34;了解更多关于蒂姆...＆＃34;按钮。如果您点击该按钮上的或点击，它将适用于所有设备（包括iOS）。

我可以在两者之间看到的唯一区别是，第一个标签位于<div>标签上，而第二个标签位于<button>标签上。

Bootstrap不支持从iOS设备上的<div>启动模态窗口吗？如果确实如此，您是否发现我的代码有任何问题会导致它仅在iOS设备上失败？

Answer 1

克里斯的回答是正确的。将div更改为button有助于澄清您的标记。但是，如果您需要保留相同的标记，还可以将cursor: pointer添加到div元素中，以便让safari知道这可能是可点击的。它还让鼠标用户拥有一个标准的视觉提示，该元素也是可点击的。

只需添加类clickable，然后包含以下CSS：

.clickable {
    cursor: pointer;
}

Here's an MCVE in Fiddle with the fix as well

^{注意我这里没有使用过Bootstrap的btn类，因为它们会自动添加cursor规则。}

Answer 2

这根本不是Bootstrap特有的，这是iOS上的一般问题。默认情况下，许多不常用的交互元素（例如<div> s）在iOS上无法点击/可点击。
请参阅https://github.com/facebook/react/issues/134以及链接＆amp;其中的后续行动有更多细节。
如果可能，请改用<button>或<a>。无论如何，交互式元素的<div>在语义上都不合适。