引导带4中列间的等距

Question

我是初学者web开发人员(html和css)。我的项目是在引导4。我有5列在一行。

我有这样的代码：

<section class="related-product">
    <div class="container">
        <div class="row">
            <div class="col-12 h-100 pt-4">
                <h4 class="float-left">Podobne produkty</h4>
                <span class="pl-3 related-product-count">(20 produktów)</span>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="mt-5 w-100">
                    <div class="w-100 mb-3">
                        <img src="img/product1.png" class="img-fluid">
                    </div>
                    <div class="product-card-name-box">
                        <a class="product-card-new-info" href="#">Nowość</a><br/>
                        <div class="product-card-name pt-2">
                            <a href="#">Szafka mimimo</a>
                        </div>
                    </div>
                    <div class="product-card-category"><a href="#">Stojąca</a></div>
                </div>
            </div>
            <div class="col">
                <div class="mt-5 w-100">
                    <div class="w-100 mb-3">
                        <img src="img/product2.png" class="img-fluid">
                    </div>
                    <div class="product-card-name-box">
                        <a class="product-card-new-info" href="#">Nowość</a><br/>
                        <div class="product-card-name pt-2">
                            <a href="#">Szafka mimimo</a>
                        </div>
                    </div>
                    <div class="product-card-category"><a href="#">Stojąca</a></div>
                </div>
            </div>
            <div class="col">
                <div class="mt-5 w-100">
                    <div class="w-100 mb-3">
                        <img src="img/product3.png" class="img-fluid">
                    </div>
                    <div class="product-card-name-box">
                        <a class="product-card-new-info" href="#">Nowość</a><br/>
                        <div class="product-card-name pt-2">
                            <a href="#">Szafka mimimo</a>
                        </div>
                    </div>
                    <div class="product-card-category"><a href="#">Stojąca</a></div>
                </div>
            </div>
            <div class="col">
                <div class="mt-5 w-100">
                    <div class="w-100 mb-3">
                        <img src="img/product4.png" class="img-fluid">
                    </div>
                    <div class="product-card-name-box">
                        <a class="product-card-new-info" href="#">Nowość</a><br/>
                        <div class="product-card-name pt-2">
                            <a href="#">Szafka mimimo</a>
                        </div>
                    </div>
                    <div class="product-card-category"><a href="#">Stojąca</a></div>
                </div>
            </div>
            <div class="col">
                <div class="mt-5 w-100">
                    <div class="w-100 mb-3">
                        <img src="img/product5.png" class="img-fluid">
                    </div>
                    <div class="product-card-name-box">
                        <a class="product-card-new-info" href="#">Nowość</a><br/>
                        <div class="product-card-name pt-2">
                            <a href="#">Szafka mimimo</a>
                        </div>
                    </div>
                    <div class="product-card-category"><a href="#">Stojąca</a></div>
                </div>
            </div>
        </div>
    </div>
</section>

如何在列之间(在LG和XL上)保持相等的间距？我如何在较小的分辨率(xs sm，md)的1或2列在一行(响应)？

我怎么能做到呢？

请帮帮我

Answer 1

在这种情况下，我建议您尝试Table，您可以尝试这里

但是，对于较小的Col，您可以参考链接这里 go到网格类，在那里您可以根据目标分辨率选择最佳选项。

如果您将其保留为默认的Col，它将对空间进行等分，让我们说：

<Row>
  <Col></Col>
  <Col></Col>
</Row>

在这种情况下，两个Col将共享您分配的空间的50%。

为了响应，您可以获得整个css 这里，在https://getbootstrap.com/docs/3.4/css/#grid-options和https://getbootstrap.com/docs/3.4/css/#grid-responsive-resets下尝试拖动浏览器查看性能:)