如何使Bootstrap的列有相同的高度？

Question

在这里，我有一个部分，在一行内有2个列，在列内我有一个卡，我想使它，列的高度总是相同的，在任何显示，在我的一个显示中，第二个卡列的高度更大，在另一个是第一个。这是我得到的结果。

.abouts{
    margin: 20px 20px 0 20px;
}
.about1{
    padding-right: 7px !important;
}
.about2{
    padding-left: 7px !important;
}
.abouts .card{
    border: none;
    border-radius: 0;
}
.about1>.card{
    background-color: #EEEEEF;
    background-image: url(images/transparentears.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}
.about2>.card{
    background-color: #01D9D9;
    background-image: url(images/rosebear.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 50%;
}
.about1 button, .about2 button{
    border: 2px black solid;
    background-color: transparent;
    border-radius: 42px;
    width: 145px;
    height: 45px;   
}
.about1 .card>.card-body, .about2 .card>.card-body{
    margin: 15% 0 15% 0;
}
.about2 .card-body{
    width: 60%;
}

<div class="abouts">
      <div class="row">
        <div class="col-md-5 about1">
          <div class="card">
            <div class="card-body">
              <p>ABOUT</p>
              <h3 class="card-title">Where the <br>expectation is <br>more than money</h3>
              <button>Learn More</button>
            </div>
          </div>
        </div>
        <div class="col-md-7 about2">
          <div class="card">
            <div class="card-body">
              <h3 class="card-title">Switzerland <br>hand made</h3>
              <p class="card-text">Sed urna ante, scelerisque nec felis in, finibus placerat orci. Aliquam dictum id enim nec commodo. Interdum et malesuada fames.</p>
              <button>Get Started</button>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

对于制作你的 column 在任何分辨率下，您都必须添加相同高度的 responsive 纲 media query

我已经创建在 JS提琴

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

您可以找到更多关于媒体查询的信息 在这个文档中

Answer 2

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

如果你使用的是卡牌，请查询卡牌牌型 https:/getbootstrap.comdocs4.0componentscard#card-decks。