列内的等高内容 bootstrap 4

Question

我知道，我知道， bootstrap 4 预装了等高列。那么为什么每列中每个单独的 p 标签的高度是由文本字符串的长度决定的，而不是由列高决定的呢？我只希望每个客户气泡与列表中的其他气泡看起来一致，任何帮助都会很棒。包括网站截图和相关代码片段。

list of clients with unequal heights

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

.cli {
  padding-top: 20px;
  font-size: .9em;
  background-color: rgb(255, 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>

Answer 1

最简单的方法是将 flexbox 添加到 .col 元素。然后告诉你的 .cli 使用 flex:

增长

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

和

.cli {
  flex: 1;
}

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

列内的等高内容 bootstrap 4

Equal height content within columns bootstrap 4

html

css

bootstrap-4

flexbox

height