Lightbox / Bootstrap - HR开始超越内容

Question

我最初创建了一个Bootstrap Thumbnail图像网格，HR会立即跳到所有图像下面。

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

我没有问题应该充当Footer HR的HR现在忽略所有图片并且直接跳回到页面顶部。

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

HTML：

<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">

非常基本的自定义CSS：

.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%;
}

Bootstrap和Lightbox都是本地安装的，并且在本网站的其他页面上没有Bootstrap问题，因此它必须是Lightbox。