Bootstrap 4 两列全高答案

【问题标题】：Bootstrap 4 Two Columns Full HeightBootstrap 4 两列全高
【发布时间】：2018-07-11 08:16:13
【问题描述】：

这是对this question 的增强。

我只是在思考如何在引导程序 4 中完成下面的布局。我需要的主要是 col 1、col 2 和 col3 需要转到各自行的底部。它们需要嵌套列，但 bootstrap 4 它似乎没有填充父行的高度。请帮忙。以Here's a CodePen 为例。我希望代码笔中的红色覆盖黄色。提前致谢。

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |                        | COL 1 | COL 1 | COL 3  |
  |       Navigation       |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  +------------+------------------------------------+

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

在这种情况下，您唯一需要做的就是将 h-100 类 (height:100%) 添加到行中。

这是工作代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .container {
        background: green;
    }

    .col-md-3 {   
        background: pink;
    }
    .col-md-9 {
        background: yellow;  	
    }
    .col-md-4 {
        background: red;
    }
</style>

<div class="container">
   header
    <div class="row">
        <div class="col-md-3">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. It has </div>
        <div class="col-md-9">
            <div class="row h-100">
                <div class="col-md-4">col2 - 1</div>
                <div class="col-md-4">col2 - 2</div>
                <div class="col-md-4">col2 - 3</div>
            </div>
            col2
        </div>
    </div>
</div>

【讨论】：