在Justin的Bootstrap 4标签中使用Justified Gallery的问题

Question

我要完成的页面有一个选项卡式内部菜单系统，并且在其中（第一个和最后一个选项卡）中有合理的画廊

http://miromannino.github.io/Justified-Gallery/

该代码在第一个选项卡中运行良好，但是当我将其放在最后一个选项卡中时，它将所有图像转换为80px x 80px的缩略图。最初，我认为这可能仅限于每页一个图库，所以我进行了一些测试，然后就可以在选项卡之外添加另一个图库了。

我做了一些进一步的测试，发现它在第一个选项卡而不是最后一个选项卡中起作用的原因是因为第一个选项卡上有一个活动类，从而使div成为一个块元素（display: block）当我在另一个选项卡上激活时，它使图库正常工作，但显然破坏了这些选项卡。

在这一点上，我对于如何使它正常工作仍然束手无策，所以我希望这里的人能对我有所帮助。下面是代码，谢谢！

<div class="middleContent">
  <div class="container">
    <div class="row">
      <div class="col-sm-9 leftContent">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#orderOnline" role="tab">Menu</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="orderOnline" role="tabpanel">
            <div class="row">
                <h2>MENU</h2>

                <div id="mygallery" >
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
                    </a>
                </div>


            </div>
          </div>
          <div class="tab-pane" id="reviews" role="tabpanel">
            <h2>Reviews</h2>
          </div>
          <div class="tab-pane" id="about" role="tabpanel">
            <h2>About</h2>
          </div>
          <div class="tab-pane" id="photos" role="tabpanel">
            <div>
                <div>
                    <h2>Food</h2>

                    <div id="foodgallery">
                        <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
                    </a>

                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery：

<script>
    $('#mygallery').justifiedGallery({
        rowHeight: 300,
        lastRow: 'nojustify',
        randomize: false,
        margins: 10
    });
</script>

<script>
    $(function(){
        $('#foodgallery').justifiedGallery({
            rowHeight: 200,
            lastRow: 'nojustify',
            randomize: false,
            margins: 10
        });
    }); 
</script>