如何改变Bootstrap 4的布局,以消除空格,并使其响应。

问题描述 投票:0回答:1

我目前正在做一个项目,使一个网络.但使用bootstrap后,我得到了一些错误的图片之间的空间,它不也是响应在Web以及在应用程序。内容分为两类Y和C的Y是罚款在其空间的问题是来自C节.类别标签也是不响应.如果你能解决这个错误,请为我提供一个布局,这是完美的Web和应用程序使用bootstrap。

先谢谢你

<div class=" secondbtn" style="align-items: center;">
    <h4>The Y category</h4>
</div>


        <div class="filtr-container galleryContainer d">
            <!-- item -->


           <div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Y" data-sort="">
                <img src="images/animals/animals (1).jpg" alt="">

                <span class="col-md-3 col-lg-3 item-desc" style="position: initial;">Malavian  Cichlids</span>
            </div>

        <div class="col-4 col-md-3  col-lg-3 filtr-item thumbnail" data-category="Malavian,Tanganyikan,C" data-sort="cat">
            <img src="images/animals/animals (4).jpg" alt="">
            <span class="item-desc" style="position: initial;">plecos</span>
        </div>




</div>
        <div class="second" >
                <h4><span>The C category</span></h4>
            </div>


    <section class="container-fluid ">
        <div class="layout_M filtr-container galleryContainer d">

            <div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="cat">

                <img src="images/animals/animals (4).jpg" alt="">
                <span class="item-desc" style="position: initial;" >Barbs</span>
            </div>

            <div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
                <img src="images/animals/animals (5).jpg" alt="">
                <span class="item-desc">Cory Cats</span>
            </div>

            <div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
                <img src="images/animals/animals (5).jpg" alt="">
                <span class="item-desc">Freshwater Plants</span>
            </div>

</div>
</section>

    </div>
</div>

The space bellow C category!

layout bootstrap-4 responsive-design space
1个回答
0
投票

要使T响应尝试包裹你的列在一个DIV与类名称行。

© www.soinside.com 2019 - 2024. All rights reserved.