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 上的行和列的当前视图。

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

Answer 1

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

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

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="row equal">
  <div class="col-md-8">
    <div>
      <p style="background-color:pink;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quibusdam nobis praesentium hic vero quo quia error sed commodi cumque, illo porro eaque ad ipsa. Error maxime consequatur officiis alias fuga mollitia quas, magnam delectus necessitatibus
        illum, quos aperiam doloremque eaque explicabo architecto dolor? Placeat quos nemo natus velit aliquam?</p>
    </div>
  </div>
  <div class="col-md-4">
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci blanditiis commodi sapiente totam sequi consectetur provident. Voluptatibus corrupti odit reiciendis, aliquid temporibus dolores tempore optio delectus nesciunt ipsam veritatis quisquam
        facilis voluptatem voluptates inventore aliquam, praesentium, assumenda ducimus ratione quasi nisi sunt consequatur corporis soluta. Deleniti quam harum soluta alias minima voluptas iusto voluptates, iure necessitatibus assumenda ex. Minus numquam
        beatae vero aperiam cupiditate assumenda ipsam hic ad corporis placeat facere consequuntur consectetur sint, aspernatur mollitia optio odit eos officia nostrum? Totam asperiores quia sequi autem. Ex nostrum fuga, et, illo iusto inventore officiis
        facere minima hic sint obcaecati consectetur.</p>
    </div>
  </div>
</div>

Answer 2

对于其中的 div，您可以将 position absolute 与 CSS transform 和 translate 属性一起使用。

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

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