除非另有说明，否则Bootstrap中的列高度不应该只覆盖内容吗？

Question

我正在编写关于在线培训的代码，我正在进行bootstrap。我遵循了训练中提到的确切步骤，但在我的结果中，我正在创建的行的高度比它应该的高度高得多。

所以训练是在Bootstrap 3上进行的，但我使用的是bootstrap 4(以防这是重要的信息)。我为img创建了一行和两列，每列一列-md-2，然后在上面放入图像。但是柱子的高度比它应有的高度要高得多。

 <div class="container">
                <div class="row">
                    <img src="images/carousel-1.jpg" alt="1" class="col-md-2" />
                    <img src="images/carousel-2.jpg" alt="2" class="col-md-2" />
                </div>
            </div>

我希望列的高度是具有可接受的填充和边缘的图像的大小，而不是3到4倍大。

我的网站图片：

​

​

Answer 1

您还可以向每个img元素添加class="img-responsive“。这将对图像应用max-width: 100%；和height: auto；，这样它就可以很好地缩放到父元素。

 <div class="container">
                <div class="row">
                   <div class="col-md-2">
                     <img src="images/carousel-1.jpg" alt="1"/>
                     <img src="images/carousel-1.jpg" alt="1"/>
                    </div>
                </div>
</div>