如何确定列高，使其根据其内容显示？

Question

我要根据卡的内容确定卡的高度，而不要彼此相等。并排放置时，卡的高度相同，我想避免这种情况？

我已经尝试过使用引导程序中的card-columns类，但是列的大小仍然相同。

Answer 1

尝试使用引导程序将对您有所帮助

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card">
      <h3>Card 2</h3>
      
    </div>
  </div>
   
  <div class="col-sm-4">
    <div class="card">
      <h3>Card 4</h3>
      <p>Some text</p>
      <p>Some text</p>
       <p>Some text</p>
        <p>Some text</p>
         <p>Some text</p>
    </div>
  </div>
</div>
</div>