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

我遇到引导程序4列高度和垂直对齐问题。这是一个JSFiddle与问题。Bootstrap 4列垂直居中并保持相同高度

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

问题是，我不能设法保持列的高度，当我想垂直居中它们的内容。没有添加类，列具有相同的高度，但内容居中顶部。搜索后，我发现以我的列为中心的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>

有谁想通了这个问题？或者可以帮我弄明白吗？

在此先感谢球员

来源

2017-09-04 Martin Stievenart

尝试使用类像col-md-＃（用于平板电脑）和col-sm-＃（fo r手机）。这应该工作。参考：https：//v4-alpha.getbootstrap.com/layout/grid/#column-resets – WebGuy

在我的情况下col-sm被col替换，col-md由col-lg替换。所以它不是一个解决方案 –

你可以这样做：

从行元素删除align-items-center类
添加align-items-center和d-flex类每个.why-choose-warranty .row div或将其添加到风格：
```
display: flex; 
align-items: 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 { 
 
    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; 
 
    } 
 
}

<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>

来源

2017-09-04 16:16:40 kukkuz

你的答案解决了我的问题，或者至少让我走向正确的方向。添加css'display：flex; align-items：center;'在元素上垂直居中，同时保持相同的高度。我有另一个小问题，我有div中的两个元素，我希望他们是一个在另一个之上。所以我不得不在d-inline-block类中添加一个额外的div。谢谢:) –

欢迎:) – kukkuz

你加d-flex和

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

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

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

Updated fiddle

.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 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>

来源

2017-09-04 16:02:00 LGSon

这也解决了这个问题，也谢谢你:) –

@MartinStievenart谢谢。请注意，正如在另一个答案中所做的那样，创建自己的“flex规则”不是要走的路，而是使用我在这里展示的内置类，否则使用框架的整个点就会丢失。最重要的是，增加需要下载的内容将使您的解决方案性能降低，维护更多。 – LGSon

是的，我使用了bootstrap提供的内置类。我试图尽可能多地使用它们，当我知道它们时，它变得不容易因为有一些东西:) –

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

回答

相关问题