制作 Bootstrap 行 d-flex 是否使其列的高度相等？答案

【问题标题】：Does making a Bootstrap row d-flex make its columns equal heights?制作 Bootstrap 行 d-flex 是否使其列的高度相等？
【发布时间】：2017-12-06 16:00:09
【问题描述】：

制作 Bootstrap 4 行 d-flex 是否使其列高度相等？

例子，

<div class="row d-flex">
  <div class="col-md-6">
    <p>111111111111111111111111111111111111111111111111111
       22222222222222222222222222222222222222222222222222
       33333333333333333333333333333333333333333333333333333333333</p> 
  </div>
  <div class="col-md-6">
    <p>1</p>
  </div> 
</div>

【问题讨论】：

它使 col-md-6 div 标签的高度相同
可能DUPLICATE。如果您将问题粘贴到Google Search，您会找到解决方案：

标签： html twitter-bootstrap css bootstrap-4 twitter-bootstrap-4

【解决方案1】：

将d-flex 类更改为align-items-stretch 应该可以做到。

默认情况下，Bootstrap 4 网格是 flex 的。

查看文档here。

【讨论】：

【解决方案2】：

“d-flex”类有什么特点：

.d-flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

如果您不添加额外的 CSS 属性，您将拥有相等的列（默认为等高）。

【讨论】：