Bootstrap 4卡高度拉伸

问题描述

由于某种原因，当我尝试使用Bootstrap 4的卡片列时，较短的卡片的高度最终会拉伸到与旁边的卡片相等。仅当我将'row'类应用于父div时才会发生这种情况。但是，如果我删除“行”类，则卡在Chrome中会彼此叠放（这是一个已知的错误，尽管我还没有找到其他解决方案），并且也不会在较小的屏幕上叠放在Safari中。我遇到的另一个问题是，如果我对卡片施加100％的高度，它们将不会伸展，但是其下方的卡片不会靠近其上方的卡片，因此会有很大的差距。

我认为以这种方式使用卡片列的目的是要获得砌体外观，但对我而言似乎并没有这种行为。我猜想它可能与“行”类上的flexbox属性有关，但似乎我需要这样做才能使它们在2列中并排放置。

下面是我的代码。让我知道你们中是否有人对此有解决方案。预先谢谢你！

.row {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    margin-right: 30px;
    margin-left: 30px;
}

.card-columns .card {
    width: 320px !important;
    display: inline-block !important;
    height: auto;
}

.card-columns {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="card-columns row">
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text</p>
        </div>
      </div>
        </div>
        </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）