html - 使用 Bootstrap 行和列时如何在另一个 div 中垂直对齐一个 div？

Question

如何在使用 bootstrap 时将下方的左右 div 垂直居中并且它也应该是响应式的？

<div class="test row">
    <div class="wrapper">
        <div class="left col-md-3">
            <label> Label</label>
        </div>
        <div class="right col-md-9">
            <input type="text" value="input" />
        </div>
    </div>
</div>


    .test {
        border: solid 1px;

        .wrapper {
            border: solid 1px brown;
            display: inline-block;
            vertical-align: middle;

            .left {
                border: solid 1px blue;
            }

            .right {
                border: solid 1px red;
            }
        }
    }

我见过这个，但它不适用于引导行和列:css vertically align floating divs

Answer 1

.test {
    display: flex;
    flex-direction: column;
    justify-content: center;
}