BootstrapのPhotoswipeギャラリー

私は自分のサイト用のギャラリーを作成しようとしています。BootstrapのPhotoswipeギャラリー

私は現在、私のサイトが応答することができるように、ブートストラップを使用しています。 1つのギャラリーを作って、約12枚の写真を撮りたいと思っています。私はPhotoswipeのサンプルコードに従っていますが、行を作成するために4つのイメージの周りに行を置くと、ギャラリーが壊れます。

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

私は、同じギャラリークラスと4つの別々の行を作成したが、その後、それだけで4つの別々のギャラリーを作成します。

私が試した次のことは、1つの大規模な行を作成して、巨大な行の中に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>

[ enter image description here ]は[ここに私のギャラリーHTMLです。