全高嵌套行和列的引导程序4

Question

我正在尝试在网站上制作一个标题，如下所示：

这是我随Bootstrap 4提供的代码。

<div class="container h400">
<div class="row h-100">
    <div class="col-md-8">
        <img src="//placehold.it/800x400" class="img-responsive">
    </div>
    <div class="h-100 col-md text-center align-self-center align-items-center">
        <div class="row h-50">
            <div class="col-md">1</div>
            <div class="col-md bg-dark text-white">2</div>
        </div>
        <div class="row h-50">
            <div class="col-md bg-secondary text-center text-white">3</div>
            <div class="col-md bg-primary text-white">4</div>
        </div>
    </div>
</div>  
</div>

和这一行css

.h400 {
    height: 400px;
}

不过，当我观看此直播时，右边的4个框不会像我希望的那样扩展：

行不完全是水平的，文本没有垂直居中并且没有响应。

任何人都可以告诉我我做错了什么吗？

Answer 1

几件事

Answer 2

为了使用引导程序类，您可以在下面的代码段中轻松实现此结构，请参阅此代码以获取更多了解。