具有相同高度和响应式的引导卡答案

【问题标题】：Bootstrap cards with the same height and responsive具有相同高度和响应式的引导卡
【发布时间】：2020-02-14 05:46:13
【问题描述】：

我开发了一个包含三列（两列相等，一列较小）的网格。我的问题是我无法在卡片上设置高度，我在 px 中使用它们并且它有效，但这不是最好的方法。我希望三列具有相同的高度（页面的 100%），并且一些卡片占据页面的 75%、50%、25% 和 20%。

有没有办法在不使用 px 的情况下定义完全响应的高度？

谢谢！

代码

 <div class="row">
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
        </div>
      </div>

【问题讨论】：

您是否尝试过将高度设置为 % 值？或者您可以将高度设置为 vh 值
@gnujoow 是的，我测试过，但高度不起作用。如果您增加行的高度，它们会增加高度，但我认为这不是最好的解决方案
这能回答你的问题吗？ Equal Height Bootstrap Cards within Slick Carousel
@Wimanicesir 我尝试使用此解决方案，但没有成功，我无法以 % 为单位设置卡片高度 :(

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

使用下面提到的 d-flex 类。它将为您提供所有 4 张卡片的相同高度。

<div class="col-3 d-flex">
  <div class="row">
   <div class="col">
     <div class="card card2">
       <div class="card-body">
         <p class="card-text">50% height</p>
      </div>
    </div>
   </div>
  </div>
  <div class="row ">
    <div class="col">
      <div class="card card2">
        <div class="card-body">
          <p class="card-text">50% height</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col d-flex">
<div class="row">
  <div class="col">
    <div class="card card3">
      <div class="card-body">
        <p class="card-text">25% height</p>
      </div>
    </div>
  </div>
 </div>
        <div class="row">
          <div class="col">
            <div class="card card4">
              <div class="card-body">
                <p class="card-text">75% height</p>
              </div>
            </div>
          </div>
        </div>
</div>

【讨论】：

【解决方案2】：

如果你可以接受它是屏幕高度的 50%，你可以使用“vh”。

以下 CSS 在您的代码笔中起作用：

.card2 .card-body{ 高度：50vh； }

【讨论】：