列Bootstrap 4中相等的高度内容

如何解决列Bootstrap 4中相等的高度内容

我知道，我知道，引导程序4预装有相等高度的列。那么，为什么每个列中每个p标签的高度由文本字符串的长度而不是列高决定？我只希望每个客户气泡与列表中的其余气泡统一显示，任何帮助都将是惊人的。该网站的屏幕截图和相关的代码段都包括在内。

.clients {
  width: 80%;
  margin: auto;
}

.cli {
  padding-top: 20px;
  font-size: .9em;
  background-color: rgb(255,255,.6);
  padding: 38px;
  cursor: pointer;
  display: block;
  border-radius: 5px 5px 5px 5px;
  Box-shadow: 0px 5px 20px #848888;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="clients">
  <div class="row">
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Towson University Art Education Department</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Baltimore City Public Schools’ New Teacher Summer Institute</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Johns Hopkins University School of Education</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-xl-4 ">
      <p class="cli m-4">SOURCE at Johns Hopkins University</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">The Federal Judiciary Center</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Waverly Elementary/Middle School</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Baltimore Southwest Partnership</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">The gallery Church Baltimore</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Urban Teachers Baltimore</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Baltimore Curriculum Project</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">Baltimore Collegetown Network</p>
    </div>
    <div class="col-sm-12 col-xl-4">
      <p class="cli m-4">The Foundry Church Baltimore</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-lg-6">
      <p class="cli m-4">Clemson University Fellowship of Christian Athletes</p>
    </div>
    <div class="col-sm-12 col-lg-6">
      <p class="cli m-4">Johns Hopkins Hospital Lifeline Critical Care Transport Team</p>
    </div>
  </div>
  <br><br><br><br><br>

</div>
</div>
</div>

解决方法

最简单的方法是将flexbox添加到.col元素中。然后告诉您的.cli使用flex来成长：

.col-sm-12 {
  display: flex;
}

和

.cli {
  flex: 1;
}

工作示例： https://codepen.io/sergiofruto/pen/KKzebEY