Question

我是初学者Web开发人员（html和CSS）。我的项目在Bootstrap 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，而不是here

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

如果将其保留为默认值Col，它将平均划分空格，可以这样说：

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

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

要获得响应，您可能会在 here 和 Grid Option 下获得总体css Responsive column resets查看效果：）

Bootstrap 4中列之间的间距相等

1 个答案: