在“可见平板电脑”和“可见手机”类中不出现引导灯箱

Question

我正在使用这个原始引导灯箱：http://jbutz.github.io/bootstrap-lightbox/

我将其剥离并将图像链接到 div 类 "visible-tablet" 和 "visible-phone"。在此类中时，不会出现弹出图像​​。例如这里：

http://www.getaveo.com/_bootstrap4/lightbox4.html

1) 请在 900 像素以上的桌面视图中查看该页面。 现在单击右侧红色列的图像缩略图。 弹出大图，灯箱工作，棒极了。

2) 现在请让您的浏览器更小，如 ipad 视图或 700 像素宽。 由于“可见平板电脑”而弹出红色列。 现在单击图像缩略图。 大图弹出不出现，不起作用。

3) 与 500 像素或更少的手机视图相同。 “可见电话”单击图像缩略图。大图弹出不出现，不起作用。

如何在"visible-tablet" 和"visible-phone" 中弹出图像缩略图、让灯箱工作？

Answer 1

您拥有灯箱的流体行具有“可见桌面”类。当您减小窗口大小时，这会隐藏整个 div。由于父 div 显示现在不显示 - 所有子项（包括灯箱）都被隐藏。发生这种情况是因为您的 HTML 中有非唯一 ID。元素的 id 应该是唯一的 - 你有相同的 div id="demoLightbox" 多次。所以它选择了第一个。

为每个版本（桌面、桌子、手机）创建单独的 div id。