如何在引导程序中制作相同高度的卡片？答案

【问题标题】：How can I make cards in bootstrap same height?如何在引导程序中制作相同高度的卡片？
【发布时间】：2020-01-27 03:40:28
【问题描述】：

我的引导布局中有 4 张卡片，我希望它们的高度相同？这样做的最好方法是什么？我尝试使用 <br> 标签，但它不能 100% 工作。有没有更好的方法让卡片的高度相同？

这是代码

    <div class="container" style="background-color:black;opacity:0.8;" >
      <h1 style="text-align:center;color:white;">Invest</h1>
      <div class="row">
        <div class="col-sm-3 pb-3">
          <!-- Card -->
  <div class="card">

    <!-- Card image -->


    <!-- Card content -->
    <div class="card-body">

      <!-- Title -->
      <h4 class="card-title">STEP 1</h4>
      <!-- Text -->
      <p class="card-text">Exchange rate per SNET</p>
      <!-- Button -->
      <h2 class="card-text" ><img src="images/logo.png" class="rounded" style="width:15%" ><h3 >1.1 AGI</h3></h2>


    </div>

  </div>
  <!-- Card -->
        </div>
        <div class="col-sm-3 pb-3">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title">STEP 2</h4>
    <!-- Text -->
    <p class="card-text">Amount of AGI</p>
    <!-- Button -->
    <input type="number" id="amount" class="form-control" value="" oninput="getData();">

    <br>
    <p class="agiAvailable"> 0</p>
  </div>


</div>
<!-- Card -->
        </div>
        <div class="col-sm-3 pb-3">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title">STEP 3</h4>
    <!-- Text -->
    <p class="card-text">You receive</p>
    <!-- Button -->
    <output type="number" id="receive" class="form-control" value=""></output>
    <br>
    <p>SNET</p>
    <p id="snetReceived" ></p>
  </div>

</div>
<!-- Card -->
        </div>
        <div class="col-sm-3 pb-3">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title">STEP 4</h4>
    <!-- Text -->
    <p class="card-text">Confirm your purchase</p>
    <!-- Button -->
    <button  class="btn btn-primary btn-rounded btn-block" id="approve" onclick="approve()">Approve</button>
    <br>
    <br>
    <button  class="btn btn-success btn-rounded btn-block" id="mint" onclick="buy()">Mint</button>
  </div>
</div>

到目前为止，我尝试通过添加<br> 标签使它们具有相同的高度，但没有更好的方法吗？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

Bootstrap 已经为这种可能性做好了准备。试一试：

 <div class="card h-100">
     card content
  </div>

您需要开始使用带有行/列的 BS4 网格系统，而不是使用 <br> 标签。请参阅引导文档中“布局”选项卡的所有部分...尤其是“网格”和“边距/填充”部分。 https://getbootstrap.com/docs/4.3/layout/overview/

【讨论】：

请注意h-100 带有!important 的负担，就像他们的许多实用程序一样。