【问题标题】：baguetteBox.js doesn't work and shows controls at bottom of pagebaguetteBox.js 不起作用并在页面底部显示控件
【发布时间】：2018-11-03 19:18:51
【问题描述】：

我在一个网站的两个不同页面中使用 baguetteBox.js：

主页
画廊

在图库中它运行良好，但在主页中我找不到为什么灯箱控件（即：id="baguetteBox-overlay"）出现在网页底部，如下所示：

在这两个网页中，我正在加载相同的资产，并且控制台没有显示任何错误。

您可以在以下位置看到它：

主页：http://keraban.marcanuy.com
图库：http://keraban.marcanuy.com/gallery/

使用 _baguettebox.js/1.10.0（也使用 Bootstrap 4）

知道怎么解决吗？

相关代码：

在首页，

<section class="gallery-block compact-gallery">
    <div class="container">
        <div class="row no-gutters">


            <div class="col-md-6 col-lg-4 item zoom-on-hover">
                <a class="lightbox" href="/media/images/image5.width-1400.jpg">
                    <img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
                    <span class="description">
                        <span class="description-heading">Image 5</span>

                    </span>
                </a>
            </div>


            <div class="col-md-6 col-lg-4 item zoom-on-hover">
                <a class="lightbox" href="/media/images/image1.width-1400.jpg">
                    <img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
                    <span class="description">
                        <span class="description-heading">Image 1</span>

                    </span>
                </a>
            </div>
            ....

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

在底部加载js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
 baguetteBox.run('.compact-gallery', {
     animation: 'slideIn',
 });
</script>

【问题讨论】：

标签： javascript bootstrap-4 baguettebox

【解决方案1】：

基本样式表丢失并导致对话框出现，添加正确的样式表修复它<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />。

【讨论】：