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>有谁想通了这个问题？或者可以帮我弄明白吗？
在此先感谢球员
你可以这样做：
从行元素删除
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>你的答案解决了我的问题，或者至少让我走向正确的方向。添加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">
.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>这也解决了这个问题，也谢谢你:) –
@MartinStievenart谢谢。请注意，正如在另一个答案中所做的那样，创建自己的“flex规则”不是要走的路，而是使用我在这里展示的内置类，否则使用框架的整个点就会丢失。最重要的是，增加需要下载的内容将使您的解决方案性能降低，维护更多。 – LGSon
是的，我使用了bootstrap提供的内置类。 我试图尽可能多地使用它们，当我知道它们时，它变得不容易因为有一些东西:) –
尝试使用类像col-md-＃（用于平板电脑）和col-sm-＃（fo r手机）。这应该工作。参考：https：//v4-alpha.getbootstrap.com/layout/grid/#column-resets – WebGuy
在我的情况下col-sm被col替换，col-md由col-lg替换。所以它不是一个解决方案 –