微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为 owl-carousel 中使用的所有卡片设置相同的卡片高度

如何解决为 owl-carousel 中使用的所有卡片设置相同的卡片高度

我在轮播中使用卡片作为图像,并且我想让每张卡片的高度相同。
使用 h-100 类不起作用。

更改任何 p 标签内容会使卡片的大小与其他卡片不同,但我希望它具有固定大小。

我期待您能提出任何建议和解决方案。
谢谢。

下面是我的 HTML 代码

     <div class="wrapper">
             <div class="related-carousel section-padding owl-carousel">
                  <div class="card_new h-100" style="">
                    <img src="" class="card-img-top" alt="...">
                    <div class="card-body">
                      <a href="video_info.PHP"><p class="card-text">..........................</p></a>
                    </div>
                   </div> 
                   <div class="card_new h-100" style="">
                    <img src="" class="card-img-top" alt="...">
                    <div class="card-body">
                     <a href=""><p class="card-text">..............................</p></a>
                    </div>
                   </div> 
                  <div class="card_new h-100" style="">
                    <img src="" class="card-img-top" alt="...">
                    <div class="card-body">
                      <a href=""><p class="card-text">.........................</p></a>
                    </div>
                   </div>
        </div>
        </div>

解决方法

试试

    .owl-carousel {display: flex;}
.card_new{
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。