html - 如何使用 col-md-4 类制作一行，我可以在其中放置完全相同尺寸的图像？

Question

我必须在我的网页中制作两行，每行显示 4 张图片。但是当我将图像放入代码中时，即使我将它们调整为相同的尺寸，它们也会以不同的尺寸显示。请帮忙。该行的代码如下:

    <div class="col-md-3">
                   <div class="container">
                    <img src="images/resized/photo.jpg" 
                       alt="Avatar">
                        <div class="overlay">
                       <div class="text">Romance</div>
                     </div>
                    </div>
                </div>

覆盖该行的类如下:

    .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
}

Answer 1

.container 是 bootstrap 使用的类，您在 css 中调用它的方式扰乱了整个 bootstrap 网格系统。

将容器类重命名为其他名称，例如 mycontainer 应该可以解决问题