javascript - 用Bootstrap进行Photoswipe画廊

我正在尝试使用我的网站创建图库。

http://photoswipe.com/

我目前正在使用Bootstrap来允许我的网站响应。我想创建一个画廊，上面可以放12张照片。我遵循了Photoswipe的示例代码，但是如果我在每4张图像周围放置一行以创建该行，则会破坏图库。

http://photoswipe.com/documentation/getting-started.html

然后，我使用相同的画廊类创建了4个单独的行，但随后仅创建了4个单独的画廊。

我接下来尝试做的是创建一个大行，然后将我的col-md-3添加到大行中，希望它们可以正确设置样式，但结果是这样。

[] [1

<div class="my-gallery row" itemscope itemtype="http://schema.org/ImageGallery">

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="col-md-3 gallery-img">
          <a href="img/gallery/gallery1.jpeg" itemprop="contentUrl" data-size="1024x1024">
            <img src="img/gallery/gallery1.jpeg" itemprop="thumbnail" alt="Image description" class="img-responsive"/>
        </a>
          <figcaption itemprop="caption description">Image caption 1</figcaption>
        </figure>

这是我的图库HTML。

https://pastebin.com/0e850dZx

还有其他人遇到这个问题吗？

最佳答案

您可以使用viewerJS图片查看器https://fengyuanchen.github.io/viewerjs/

或Blueimp图片库https://blueimp.github.io/Gallery/

两者都是响应式的小更改，只需要..您无需担心列/放置图像等所有问题。简单而强大的图像查看库

关于javascript - 用Bootstrap进行Photoswipe画廊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44261815/