时间戳

首页 > 解决方案 > 如何在 bootstrapVue 中使一列 3 张卡片的高度匹配？

bootstrap-vue - 如何在 bootstrapVue 中使一列 3 张卡片的高度匹配？

问题描述

我有一排包含卡片的 3 列，b-card-text（卡片中的文本）的长度不相等，因此使卡片的高度不同。问题是如何使卡片的高度匹配？

尝试向h-100 d-inline-block卡片添加课程，但没有运气。

<b-row>
    <b-col class md="4">
        <b-card>
            <b-card-text>Lorem Ipsum is simply dummy text of </b-card-text>
         </b-card>
    </b-col>

     <b-col class md="4">
        <b-card class="h-75 d-inline-block">
          <b-card-text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
           </b-card-text>
       </b-card>

     </b-col>
         <b-col class md="4">
          <b-card>
             <b-card-text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
             </b-card-text>
           </b-card>
       </b-col>
</b-row>

我希望卡片的高度相同。

标签： bootstrap-vue

解决方案

在<b-row>添加类class="align-self-stretch"，或使其仅适用于md断点和上断点：class="align-self-md-stretch". h-100然后在每个上使用实用程序类<b-card>

示例：https ://jsfiddle.net/ofcxrquz/

看：

https://bootstrap-vue.js.org/docs/reference/utility-classes

https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

推荐阅读