我在 bootstrap 4 上使用 fancybox 时遇到问题

Question

我得到了这个代码：

<section class="call-to-action text-white text-center" id="Productos">
<div class="overlay"></div>
<div class="container">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Productos</h2>
</div>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
</div>
</section>

当我将它与 bootstrap 一起使用时，不允许我单击图像以拉出灯箱，我不知道该怎么办，我在这上面花了一个月的时间。

Answer 1

这个元素使得它下面的所有元素都无法访问，删除它应该可以正常工作 -

<div class="overlay"></div>

https://codepen.io/anon/pen/eLJKRm?editors=1100

另一种解决方案是将 pointer-events: none; 添加到该元素：

https://codepen.io/anon/pen/VGedrM?editors=1100

顺便说一句，你真的花了一个月的时间吗？您只需使用鼠标右键单击，然后选择 "Inspect element"。

我在 bootstrap 4 上使用 fancybox 时遇到问题

I'm having a issue using fancybox on bootstrap 4

jquery

fancybox

bootstrap-4