Bootstrap 4列垂直居中并保持相同的高度

Question

我遇到了bootstrap 4列高度和垂直对齐的问题。 这是问题所在的JSFiddle。

我需要设计一个带有项目的布局，在桌面上它们都在同一行，在移动设备上我们得到两行。所有这些都与边界有关。

问题是当我想垂直居中他们的内容时，我无法保持列的高度。 如果没有添加类，则列具有相同的高度，但内容以顶部为中心。在搜索之后，我找到了align-items-center，它使我的列居中，但高度不会保留。 这打破了我的边框布局。

我还尝试添加my-auto，align-self-center类，但没有成功。

.why-choose-warranty {
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}

.why-choose-warranty .row {
  padding: 1rem;
}

.why-choose-warranty .row div {
  justify-content: center;
}


/* Small screens (mobiles) */

@media screen and (max-width: 992px) {
  .why-choose-warranty .row {
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img {
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1),
  .why-choose-warranty .row div:nth-child(2) {
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3) {
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4),
  .why-choose-warranty .row div:nth-child(5) {
    border-right: 1px solid #d7d5d1;
  }
}


/* Big screens (desktops) */

@media screen and (min-width: 992px) {
  .why-choose-warranty img {
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div {
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child {
    border-right: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto align-items-center">
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

有没有人想出这个问题？或者可以帮我解决一下？

先谢谢你们

Answer 1

您在

上添加d-flex并删除align-items-center

• <div class="row col-12 col-lg-10 m-auto d-flex">

并将d-flex align-items-center添加到您的

• <div class="col-4 col-lg-2 d-flex align-items-center">

Updated fiddle

＆＃13;

＆＃13;

.why-choose-warranty{
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}
.why-choose-warranty .row{
  padding: 1rem;
}
.why-choose-warranty .row div{
  justify-content: center;
}

/* Small screens (mobiles) */
@media screen and (max-width: 992px){
  .why-choose-warranty .row{
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img{
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1), .why-choose-warranty .row div:nth-child(2){
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3){
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4), .why-choose-warranty .row div:nth-child(5){
    border-right: 1px solid #d7d5d1;
  }
}

/* Big screens (desktops) */
@media screen and (min-width: 992px){
  .why-choose-warranty img{
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div{
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child{
    border-right: 0;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto d-flex">
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">Test
        <br />
        <br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST
        <br />
        <br />
        <br />
        <br />
        <br />TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：

1. 从行元素中删除align-items-center类

2. 为每个align-items-center添加d-flex和.why-choose-warranty .row div个类，或将其添加到样式中：

   display: flex;
   align-items: center;
   

见下面的演示：

＆＃13;
＆＃13;
.why-choose-warranty {
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}

.why-choose-warranty .row {
  padding: 1rem;
}

.why-choose-warranty .row div {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Small screens (mobiles) */

@media screen and (max-width: 992px) {
  .why-choose-warranty .row {
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img {
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1),
  .why-choose-warranty .row div:nth-child(2) {
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3) {
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4),
  .why-choose-warranty .row div:nth-child(5) {
    border-right: 1px solid #d7d5d1;
  }
}


/* Big screens (desktops) */

@media screen and (min-width: 992px) {
  .why-choose-warranty img {
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div {
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child {
    border-right: 0;
  }
}
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto">
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;