css - 如何在 Bootstrap 3 中使一个元素填充到其容器的底部？

Question

我有一个包含两个元素的容器元素:

• A 是 col-md-8
• B 是 col-md-4
• C 是 col-md-4

现在 A 变长了，所以它扩展了容器元素。

我希望 C 填充剩余的空间，使得 A 的高度 = B 的高度 + C 的高度(包括边距)。

我如何在 Bootstrap 中执行此操作？

Answer 1

尝试使用 CSS Flexbox。使用 Bootstrap 类来实现这一点将非常整洁。

看看下面的片段:

.section {
  display: flex;
  font-size: 30px;
  color: #fff;
}

.sec-item {
  flex: 1;
}

.left-section {
  background: blue;
  height: 100vh;
  flex: 8;
}

.right-section {
  display: flex;
  flex-direction: column;
  flex: 4;
}

.right-section .top {
  background: red;
  flex: 1;
}

.right-section .bottom {
  background: green;
  flex: 1;
}

<div class="section">
  <div class="sec-item left-section">A</div>
  <div class="sec-item right-section">
    <div class="top">B</div>
    <div class="bottom">C</div>
  </div>
</div>

希望这对您有所帮助!