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