0

我正在使用这个原始的引导灯箱：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"？

4

1 回答 1

0

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

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

于 2013-05-03T23:10:09.330 回答