Question

我想将Bootstrap卡的高度装入具有固定高度的容器中。我尝试使用最大高度的常规规则，依此类推，但是没有运气。

请查看以下jsfiddle：https://jsfiddle.net/aq9Laaew/263168/

也在此处复制代码：

HTML：

<div class="container">
  <div class="row">
    <div class="col wrapper">
       <div class="card bootstrap-card" style="width: 18rem;">
        <img class="card-img-top" src="http://placehold.it/560x560" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      </div>
    </div>

  </div>  
</div>

CSS：

.wrapper {
  background-color: yellow;
  height: 60vh;
}

.bootstrap-card {
  max-height: 100%;
}

预先感谢

Answer 1

您应该改用min-height。

.wrapper {
  background-color: yellow;
  min-height: 60vh;
}

.bootstrap-card {
  height: 100%;
}

https://www.codeply.com/go/zJxfHOZynf

Answer 2

只是为了别人的利益回答我自己的问题。因此，似乎CSS无法将元素“挤压”到容器中。我认为这是可能的，因为您可以将图像放入容器中，使其最大高度为100％。

无论如何，这里可以做的是将图像的高度限制为65vh，然后您可以对其他元素使用诸如margin-top的自动边距，将它们向下推到底部容器

如何将Bootstrap4卡装入容器

2 个答案: