Bootstrap 4等高列无法正常工作

Question

我有彼此相邻的两列，但其中的内容不同，但各列不同，导致我相信这是默认值，它是Bootstrap 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％。

但是如果我做高度：100％出于某种原因使其变为100vh，而不是列高度的100％。

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

在这种情况下，我在其中做了div，我需要它们div占父列的100％

这是行和列的当前视图，边框在列的内部div上。

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

Answer 1

对于其中的div，您可以将绝对位置与CSS转换和translate属性一起使用。

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

这将使您的内部div顶点和水平中心。

Answer 2

我已经更新了代码笔，请检查https://codepen.io/anon/pen/KBEejz?editors=1100

bucket.upload(params, (err, data) => {
    ...
    this._toastr.success("File Upload Faild, Please Try Again!" , Success");
    ...
}

.equal div div {
  border: 1px solid green;
  height: 100%;
  display: flex;
  flex: 1;
}

.equal>[class*='col-'] {
  display: flex;
  flex-direction: column;
}