如何在我的 Bootstrap flex 子元素中具有相等的高度？

Posted 2023-03-05

【中文标题】如何在我的 Bootstrap flex 子元素中具有相等的高度？

【英文标题】：How can I have equal heights in my Bootstrap flex child elements?

【发布时间】：2019-03-06 15:32:27

【问题描述】：

我的理解是新的 Boostrap (v4) 使用 flex 在盒子上显示元素，并且对齐更加灵活。在我的页面中，我有三个高度相同的框，但是白色的内部元素也需要具有相同的高度。

我怎样才能做到这一点？将.tile 设置为height:100% 会导致框过长。

编辑：我想澄清这不是让标记为红色的列等高，这已经使用标准的 Bootstrap 类实现了。是白色的盒子，我需要全高。

Code Pen Link

.col-md-4 
  border: 1px solid red;


.tile 
  background: #fff;


body 
  background: grey


.img-fluid 
  width: 100%;


.padding 
  padding: 0 10px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row row-eq-height three-sections">
    <div class="col-md-4 align-self-stretch tile-outer">
      <div class="tile">
        <a href="#" target="_blank"><img src="https://via.placeholder.com/300x300"  class="img-fluid" /></a>
        <div class="padding">
          <h3>Text block 1</h3>
          <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi
            clita, eu pro tation audiam.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 align-self-stretch tile-outer">
      <div class="tile">
        <a href="#" target="_blank"><img src="https://via.placeholder.com/300x300"  class="img-fluid" /></a>
        <div class="padding">
          <h3>Some random text here</h3>
          <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. </p>
        </div>
      </div>
    </div>
    <div class="col-md-4 align-self-stretch tile-outer">
      <div class="tile">
        <a href="#" target="_blank"><img src="https://via.placeholder.com/300x300"  class="img-fluid" /></a>
        <div class="padding">
          <h3>Another random line</h3>
          <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has.</p>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

我不确定你的意思是将.tile 高度设置为 100% 会导致它们太长。听起来这就是你想要的，但也许我误解了你想要的结果？

【参考方案1】：

只需将display: flex 添加到col-md-4 容器中。这将自动将align-self: stretch 应用于子元素。 revised demo

【参考方案2】：

这个也可以解决

.tile 
 background: #fff;
 height: 100%: