Bootstrap 4两列全高

Question

嘿伙计们这是对这个问题的改进.

我只是想知道如何在bootstrap 4中完成下面的布局.我需要的主要内容是col 1,col 2和col3需要到各自行的底部.它们需要是嵌套列,但引导程序4似乎不会填充父行高.请帮忙.这是CodePen的一个例子.我希望codepen中的红色覆盖黄色.提前致谢.

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

Answer 1

在这种情况下,您唯一需要的是将h-100类(高度: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>