Bootstrap在列上的高度不相等

Question

我正在制作一个考试网站，我必须制作8类产品，这些产品必须在两行上，列的高度相等。但是，当一列的文本多于其他列时，这些列的高度并不相等。我尝试过这种方式

.row [class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden; 
}

这种方式

.equal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.equal > [class*='col-'] {
display: flex;
flex-direction: column;
}

我认为我的引导程序中有问题或其他原因。这是我的html和css

<div class="container cat-con">
<div class="row">
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="img/lamp-1.png" >
<h4 class="card-title">Мебелно Осветление</h4>
</div>
</div>
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="img/stairs.png" >
<h4 class="card-title">Осветление за стълби</h4>
</div>
</div>
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="img/billboard.png" >
<h4 class="card-title">Осветление за прозорци, реклами, рафтове и ръбове</h4>
</div>
</div>
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="img/led.png" >
<h4 class="card-title">Основно
осветление</h4>
</div>
</div>
</div>
</div>

CSS

@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {

}

.content {
text-align: center;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
padding: 30px 5px;
margin: 6px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), #FFFFFF;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 4px;

}
.content h4 {
font-size: 15px;
margin-top: 15px;
}
.content img {
width: 6rem;
margin-top: 10px ;
}
.cat-con {
margin-bottom: 40px; 
}

Answer 1

嗨，请尝试此代码以获得相等列的

.row{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; 
margin-right: -15px;
margin-left: -15px;
}
.row > [class*='col-'] {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}