html - 如何在 Bootstrap 中让一个 div 填充其父列的整个高度

Question

我希望带有红色边框的 div 与右边的绿色边框高度相同？这是在 bootstrap 4 中!

尝试过 display: flex 和 flex-grow，也尝试过将边框放在列上(这会产生我正在寻找的效果)但它没有填充。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 order-lg-1">
      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-3">
      <div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
    <div class="col-12 col-lg-6 order-lg-2">
      <div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-4">
      <div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
  </div>
</div>

这是一支现有的笔:https://codepen.io/Daggett/pen/OKJxPm

这些列也是响应式的，需要在较小的断点处堆叠(因此有 order-lg 类)

Answer 1

将 d-flex 添加到列中以使用默认的拉伸(stretch)行为并具有相同的高度。还要向元素添加 w-100 以保持其默认全宽:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 order-lg-1 d-flex">
      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-3">
      <div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
    <div class="col-12 col-lg-6 order-lg-2 d-flex">
      <div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence.</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-4">
      <div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
  </div>
</div>