html - Bootstrap 4等高列不起作用

Question

我有两列彼此相邻，但它们内部的内容不同，但列不同，我被引导相信这是默认的引导程序 4，或者它曾经在某个 alpha 中。

目前我已经尝试过了。

.equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.equal > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

并将其添加到我的 CSS 中。

我的 html 看起来像。

<div class="row equal">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
</div>

但它似乎并没有以任何方式影响它。

编辑似乎不是列，而是所述列中的内容不是其父级的 100%。

但是如果我做 height: 100% 它会因为某种原因使它成为 100vh 而不是 100% 的列高。

https://codepen.io/anon/pen/KBEegO

在这个我已经在其中制作了 div 我需要它们 div 100% 的父列

即边框位于列的内部 div 上的行和列的当前视图。

我需要它，所以如果左列中有更多内容，则右列与它的高度相同，如果右列与图像上的一样，则左列得到它的高度。

标签： htmlcssbootstrap-4

Answer 1

对于其中的 div，您可以使用带有 CSS 变换和翻译属性的绝对位置。

.innerdiv {
 top: 50%;
 position:absolute;
 left: 50%;
 transform: translate(-50%, -50%);
}

这将使您的内部 div 垂直和水平居中。