当一张卡获得更多内容时，引导卡不会调整高度

Question

我有4张卡片。在来自一个卡的后端的场景中，在一个特定的卡中将有更多的文本。但预期的输出是:如果一张卡片比其他卡片获得更大的内容。所有的卡片必须在相同的高度，没有太多内容的卡片将垂直对齐。(但该卡片的高度应与大内容卡片的高度相同)。我使用bootstrap卡和d-flex。但我做不到。

代码片段

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <h1 class="text-center mb-5">Our other packages</h1>
            <div class="slick-swipe v-align-center-slick-contents">
                <div class="mr-3 p-2">
                    <div class="card text-center level-4 bg-1">
                        <div class="border-top-thick"></div>
                        <div class="card-body">
                            <h6>Bigger Content Big Big</h6>
                        </div>
                    </div>
                </div>
                
                <div class="mr-3 p-2">
                    <div class="card text-center level-4 bg-2">
                        <div class="border-top-thick"></div>
                        <div class="card-body">
                            <h6>Gold</h6>
                        </div>
                    </div>
                </div>
                

                <div class="mr-3 p-2">
                    <div class="card text-center level-4 bg-3">
                        <div class="border-top-thick"></div>
                        <div class="card-body">
                            <h6>Thee</h6>
                        </div>
                    </div>
                </div>

                <div class="mr-3 p-2">
                    <div class="card text-center level-4 bg-4">
                        <div class="border-top-thick"></div>
                        <div class="card-body">
                            <h6>Diamond</h6>
                        </div>
                    </div>
                </div>

                <div class="mr-3 p-2">
                    <div class="card text-center level-4 bg-5"> 
                        <div class="border-top-thick"></div>
                        <div class="card-body">
                            <h6>More Packages</h6>
                        </div>
                    </div>
                </div>

            </div>
    </div>

​

Answer 1

您必须在css文件中添加一个类来指定卡片的高度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1 class="text-center mb-5">Our other packages</h1>
  <div class="slick-swipe v-align-center-slick-contents">
    <div class="mr-3 p-2">
      <div class="card cards text-center level-4 bg-1">
        <div class="border-top-thick"></div>
        <div class="card-body">
          <h6>Bigger Content Big Big</h6>
        </div>
      </div>
    </div>

    <div class="mr-3 p-2">
      <div class="card cards text-center level-4 bg-2">
        <div class="border-top-thick"></div>
        <div class="card-body">
          <h6>Gold</h6>
        </div>
      </div>
    </div>

    <div class="mr-3 p-2">
      <div class="card cards text-center level-4 bg-3">
        <div class="border-top-thick"></div>
        <div class="card-body">
          <h6>Thee</h6>
        </div>
      </div>
    </div>

    <div class="mr-3 p-2">
      <div class="card cards text-center level-4 bg-4">
        <div class="border-top-thick"></div>
        <div class="card-body">
          <h6>Diamond</h6>
        </div>
      </div>
    </div>

    <div class="mr-3 p-2">
      <div class="card cards text-center level-4 bg-5">
        <div class="border-top-thick"></div>
        <div class="card-body">
          <h6 style="font-size: 1.5rem;"> Vestibulum feugiat congue nulla vitae semper. Mauris id nibh nisi. Aliquam vel semper velit, sit amet hendrerit ipsum. Vestibulum sodales dictum ex vitae accumsan. Vestibulum varius ut mauris at iaculis. Suspendisse sodales pulvinar diam, non lobortis risus. Etiam sagittis convallis leo, a scelerisque eros laoreet et. </h6>
        </div>
      </div>
    </div>
    
    <div class="mr-3 p-2">
      <div class="card cards text-center level-4 bg-5">
        <div class="border-top-thick"></div>
        <div class="card-body">
          <h6>More Packages</h6>
        </div>
      </div>
    </div>

  </div>
</div>

.cards {
  height: 200px;
}

Here is an example