Html Lightbox/Bootstrap-HR开始在内容上方跳跃

我最初创建了一个引导缩略图图像网格，HR会立即跳到所有图像下面

我决定删除引导图像网格，并将其更改为Lightbox图像网格，这样会更好

我没有问题，应该作为页脚HR的HR现在忽略了所有图片，直接跳回到页面顶部

这与Lightbox中的预设CSS配置有关吗

HTML:

Bootstrap和Lightbox都是本地安装的，我对本网站其他页面上的Bootstrap没有问题，所以它一定是Lightbox

---

请提供屏幕截图。正如您所知，在互联网上的大多数志愿者网站上，通常不鼓励请求紧急/尽快。这里所有的问题都同等重要。

<div class="container lightbox">
    <div class="gallery">
        <div class="row row1">
            <div class="col-md-3">
                <a href="Pictures/Pic1.jpg" data-title="Picture #1" data-lightbox="Picture Number 1">
                    <img src="Pictures/Pic1.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
            <div class="col-md-3">
                <a href="Pictures/Pic6.jpg" data-title="Picture #2" data-lightbox="Picture Number 2">
                    <img src="Pictures/Pic6.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
            <div class="col-md-3">
                <a href="Pictures/Pic7.jpg" data-title="Picture #3" data-lightbox="Picture Number 3">
                    <img src="Pictures/Pic7.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
        </div>


        <div class="row row2">
            <div class="col-md-3">
                <a href="Pictures/Pic4.jpg" data-title="Picture #4" data-lightbox="Picture Number 4">
                    <img src="Pictures/Pic4.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
            <div class="col-md-3">
                <a href="Pictures/Pic5.jpg" data-title="Picture #5" data-lightbox="Picture Number 5">
                    <img src="Pictures/Pic5.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
            <div class="col-md-3">
                <a href="Pictures/Pic2.jpg" data-title="Picture #6" data-lightbox="Picture Number 6">
                    <img src="Pictures/Pic2.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
        </div>


        <div class="row row3">
            <div class="col-md-3">
                <a href="Pictures/Pic3.jpg" data-title="Picture #7" data-lightbox="Picture Number 7">
                    <img src="Pictures/Pic3.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
            <div class="col-md-3">
                <a href="Pictures/Pic8.jpg" data-title="Picture #8" data-lightbox="Picture Number 8">
                    <img src="Pictures/Pic8.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
            <div class="col-md-3">
                <a href="Pictures/Pic9.jpg" data-title="Picture #9" data-lightbox="Picture Number 9">
                    <img src="Pictures/Pic9.jpg" width="200px" class="img-thumbnail">
                </a>
            </div>
        </div>
    </div>
</div>   





<hr class="bigHR2">

.bigHR1 {
    background-color: white !important;
    color: white !important;
    border: 2px solid white !important;
    border-radius: 50%;
    height: 1px !important;
    width: 850px !important;
    margin-left: 5%;
    margin-top: -1%;
}

.row1 {
    margin-top: 50%;
}

.row2 {
    margin-top: 10%;
}

.row3 {
    margin-top: 10%;
}