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

Posted 2023-03-21

【中文标题】除非另有说明，否则 Bootstrap 中的 col 高度不应该只覆盖内容吗？

【英文标题】：shouldn't col height in Bootstrap just cover the content unless mentioned otherwise?

【发布时间】：2019-06-07 14:44:08

【问题描述】：

我正在编写有关我正在接受引导程序的在线培训的代码。我按照培训中提到的确切步骤进行操作，但结果是我创建的行的高度远高于应有的高度。

所以培训是在 Bootstrap 3 上进行的，但我使用的是 bootstrap 4（以防这是重要信息）。我为 img 创建一行，然后创建两列 col-md-2，然后将图像放在它们上面。但是柱子的高度比它应该的高得多。

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

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

我的网站图片：

【参考方案1】：

您还可以为每个 img 元素添加 class="img-responsive"。这适用于 max-width: 100%;和高度：自动；到图像，以便它很好地缩放到父元素。

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