Question

我开发了一个由三列组成的网格（两列相等，一列较小）。我的问题是我无法在卡片上设置高度，我在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>

Answer 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>

Answer 2

如果可以接受屏幕高度的50％，则可以使用“ vh”。

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

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

具有相同高度和响应速度的自举卡

2 个答案: