Bootstrap Modal在iOS设备上不起作用

Question

我正在使用Bootstrap在一个网站上工作并遇到一个我似乎无法解决的问题.这是该网站的草稿.

在"我们做什么"面板上,我在第一个缩略图框上创建了一个可点击的模态窗口(缩略图下显示"企业软件开发").如果单击非移动设备上的缩略图,将弹出模式窗口.

在台式计算机(或笔记本电脑)上,它工作得很好.但是在iOS(iPhone,iPad等)上它根本不起作用:即点击它不会调出模态窗口.

但是,如果您在"我们是谁"面板的页面上看起来较低,则会显示"查看更多关于Tim ..."按钮.如果您单击或点击该按钮,它将适用于所有设备(包括iOS).

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

Bootstrap不支持从<div>iOS设备上启动模态窗口吗？如果是这样,您是否看到我的代码有任何问题会导致它仅在iOS设备上失败？

Answer 1

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

只需添加该类clickable,然后包含以下CSS:

.clickable {
    cursor: pointer;
}

这里也是小提琴中的MCVE

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

Answer 2

这根本不是Bootstrap特有的,这是iOS上的一个普遍问题.默认情况下,许多不常用的交互元素(例如<div>s)在iOS上无法点击/可点击.
有关详细信息,请参阅https://github.com/facebook/react/issues/134及其中的链接和后续内容.
如果可能,请使用<button>或<a>代替.一个<div>用于交互式元素也不是很合适的语义反正.