Question

我正在使用CSS，HTML和Bootstrap进行Web开发课程的作业。我需要创建一个网站，但布局存在一些问题，我在容器和行div中使用了引导卡（带有图像），但该行中的3张卡未对齐到列的中心，您可以在此screenshot中看到，列的右侧左侧留有一些空间。

这是我的代码：

<div class="container">

    <div class="row ">

                <div class="col-4">
                    <div class="card text-center " style="width: 18rem;">
                        <img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Canon EOS Rebel T7</h5>
                            <p class="card-text">Price : Rs. 37000.00</p>
                            <a href="#" class="btn btn-primary btn-block">Add to cart</a>
                        </div>
                    </div>
                </div>    

                <div class="col-4">
                    <div class="card text-center" style="width: 18rem;">
                        <img src="imgs\products\cameras\2.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Fujifilm X-T3</h5>
                            <p class="card-text">Price : Rs. 34000.00</p>
                            <a href="#" class="btn btn-primary btn-block">Add to cart</a>
                        </div>
                    </div>
                </div>

                <div class="col-4">
                    <div class="card text-center" style="width: 18rem;">
                        <img src="imgs\products\cameras\3.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Nikon D5600</h5>
                            <p class="card-text">Price : Rs. 43000.00</p>
                            <a href="#" class="btn btn-primary btn-block">Add to cart</a>
                        </div>
                    </div>
                </div>

    </div>
</div>

我想知道是否有任何方法可以使用CSS或bootstrap将卡在col div中居中对齐？

我也想知道如何使所有卡的尺寸（宽度和高度）相同，即使其中的图像尺寸不同，如screenshot所示，最后两张卡的尺寸也不同尺寸，因为图像尺寸不同。

Answer 1

第一个问题：

只需在您的col定义中使用col-4 d-flex justify-content-center。这样，卡片应该在see here列的中间对齐。蓝色=容器，紫色=列，绿色=卡。

希望这对您有用！

如何使用引导程序使容器div中的行内容居中对齐？

1 个答案: