如何在 Bootstrap 4 中获得等高的列子项？

Question

我想要达到的目标：

1. 等高的列直接引导子项，因此列之间的间隙是可见的（Codepen 中的第一个解决方案，但它在 Safari (Mac) 上失败）。

   或（如果可能的话）

2. 等高的 Bootstrap 列之间有可见的间隙（如果我将背景颜色设置为col类 div - 由于填充，间隙不可见 - 您可以在 Codepen 中看到）。

我尝试过的：

1. 将h-100类 ( height: 100%)设置为列直接子项，但在 Safari 上失败（请参阅 StackOverflow 问题）。
2. margins在coldiv上使用水平而不是padding但它打破了 Bootstrap 的网格系统。

代码笔

HTML：

<div class="container">
  <h3>This is how it should work - fails on Safari (Mac)</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

<div class="container">
  <h3>Backgrounds applied to col divs (gaps are not visible because of cols padding)</h3>
  <div class="row no-gutters">
    <div class="col-4 bg">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

<div class="container">
  <h3>Basic Bootstrap HTML</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

CSS：

.inner,
.bg {
  background: #ddd;
}
.h-100 {
  height: 100%;
}

Answer 1

为了让 ia Safari 正常运行，请一直height使用 Flexbox ，而不是。

添加d-flex的col-4元素，并col到inner。

d-flex添加display: flex并使inner，基于align-items默认为stretch，填充其父级，col添加flex: 1并使其填充宽度。

堆栈片段

h3 {
  margin-top: 30px;
}
.col-4 {
  margin-bottom: 30px;
}
.inner {
  background: #ddd;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <h3>This is how it should work - <strike>fails on Safari (Mac)</strike></h3>
  <div class="row">
    <div class="col-4 d-flex">
      <div class="inner col">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Inner</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Inner</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Inner</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>