如何让 Bootstrap Flex 子元素具有相同的高度？

Question

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

我怎样才能实现这个目标？将 设为.tile会使height:100%框呈现太长。

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

代码笔链接

.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" alt="" 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" alt="" 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" alt="" 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>

Answer 1

只需添加display: flex到col-md-4容器中即可。这将自动应用于align-self: stretch子元素。修改后的演示