Bootstrap flex：在一行中，一个列具有全高，另一个具有垂直居中对齐的元素答案

【问题标题】：Bootstrap flex: in one row, one col has full height and the other has verticaly center aligned elementsBootstrap flex：在一行中，一个列具有全高，另一个具有垂直居中对齐的元素
【发布时间】：2020-09-19 23:00:12
【问题描述】：

我正在努力使用 bootstrap 4 试图垂直对齐右列的元素并在左列有一个完整的高度列，只是为了有一个背景颜色。我看过很多关于这些问题的帖子，但没有关于这种具体方法的帖子

我的 HTML

<div class="container-fluid">
    <div class="row ">
        <div class="col-md-6 ">
            <div class="content colour-1">
                //Just want a full height background color

              </div>
        </div>
        <div class="col-md-6 ..->class?">
            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" >
                //I just want this small form vertically aligned - center
            </form>
        </div>
    </div>
</div>

我怎样才能做到这一点？只能用bootstrap 4来完成吗？注意我使用的是 Angular，所以这些是我的依赖项：

 "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~9.1.9",
    "@angular/localize": "~9.1.9",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0", -->NG-BOOTSRAP
    "bootstrap": "^4.4.0", --->BOOTSRAP
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },

【问题讨论】：

标签： css angular bootstrap-4 flexbox

【解决方案1】：

<div class="container">
    <div class="row" style="height: 100vh">
        <div class="col-6 d-flex flex-grow-auto">
            <div class="content colour-1">
                //Just want a full background color

            </div>
        </div>
        <div class="col-6 flex-row d-flex flex-column justify-content-center">
            <input class="form-control">
            <input class="form-control">

        </div>
        </div>

    </div>

【讨论】：