如何使Bootstrap 4卡与父容器的高度相同？

Question

我正在使用Bootstrap 4 Beta来设置一系列必须看起来像布局的卡片：

正如底部的第二张图片所描绘的那样，我遇到的问题是让中间列中的牌响应父容器的高度。正如你所看到的，顶部两张小卡片的自举卡体消失，底部卡片中的图像自行伸展。我不知道自己做错了什么。我将不胜感激任何帮助：

我的代码：

<div class="container">
<div class="row">

  <div class="col-md-4">
    <div class="card">
      <img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 flex-column flex-wrap">
    <div class="d-inline-flex h-50 ">
      <div class="card w-50">
        <img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>

      </div>

      <div class="card w-50">
        <img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>

      </div>
    </div>
    <div class="d-flex flex-column h-50">
      <div class="card align-self-stretch">
        <img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img class="card-img-top img-fluid " src="./assets/hands.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

风格：

.col-md-4{
 max-height: 357px;
 }

请参阅Here

中的jsfiddle