Question

我的引导程序布局中有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>标签使它们具有相同的高度，但是还有更好的方法吗？

Answer 1

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

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

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

如何在自举程序中制作高度相同的卡片？

1 个答案: