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

Question

我想要达到的目标：

1. 等高的列指向子级，因此列之间的间隙可见（Codepen 中的第一个解决方案，但在 Safari (Mac) 上失败）。

   或（如果可能的话）

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

   李>

我尝试过的：

1. 将 h-100 类 (height: 100%) 设置为直接子列，但在 Safari (see StackOverflow question) 上失败。
2. 在col div 上使用水平margins 而不是padding，但这会破坏Bootstrap 的网格系统。

CODEPEN

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

使 i.a. Safari 一直使用 Flexbox，而不是 height。

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

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

堆栈sn-p

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>

Answer 2

将此类 align-items-stretch 与 col-4 一起用于您想要的所有列行内高度相等。