如何在一个html页面中使用多个bootstrap画廊

时间：2019-02-19 15:16:54

标签： html css bootstrap-4 bootstrap-studio

我正在尝试使用引导程序模型在一个html页面中使用多个画廊（具有数据类别的可过滤画廊）。但是，我在画廊（第二画廊）和图像之间得到了一个奇怪的空间，就像它们在一个画廊中一样。问题继续存在，随着我添加更多画廊，空间不断增加。 （请在HTML代码的顶部链接图库的css和js）。先感谢您。 

<script src="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.js/blob/master/-Filterable-Gallery-with-Lightbox-BS4-.js"></script>
<link href="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.css/blob/master/-Filterable-Gallery-with-Lightbox-BS4-.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.css/blob/master/-Filterable-Gallery-with-Lightbox-BS4-.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <main></main>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 1</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 2</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.js"></script>
</body>

</html>

我尝试使用不同的ID，不同的数据类别，不同的图像，但没有帮助。enter image description here
enter image description here enter image description here 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="/-Filterable-Gallery-with-Lightbox-BS4-.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <main></main>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 1</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 2</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="/-Filterable-Gallery-with-Lightbox-BS4-.js"></script>
</body>

</html>

0 个答案:

没有答案
相关问题
最新问题