在Bootstrap中垂直对齐DIV和文本4

Question

我在这里经历了很多问题以及许多文章和bootstrap 4文档,但未能找到我正在寻找的内容.

演示:https://jsfiddle.net/zxLLqsm0/

我正在寻找为所有列创建具有完全相同高度的盒子,并且还垂直居中对齐盒子内的文本.我设法将文本垂直对齐,但框的高度不同.

这是我的HTML

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <div class="box">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

我的CSS:

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}

Answer 1

基本上,这个问题已经得到了回答.

使用flexbox并justify-content-center使其box居中,并h-100为height:100%......

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/VsyNMHZ8VG

或者,如果要应用相同的更改.box 而不是使用Bootstrap类...

https://jsfiddle.net/g38e9Lfm/

.box {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}