bootstrap 的列高度相同
P粉358281574
P粉358281574 2023-09-06 11:13:18
[CSS3讨论组]

这可能很简单,但我不知道如何解决它。

我使用 Bootstrap5。

完整代码在这里: https://www.codeply.com/p/BywuhLNUXy

似乎 codeply 有一些问题...... 所以我也把它放在jsfiddle上

https://jsfiddle.net/paul_z/y7a6dnkf/1/

主要是联系人目录页面。 代码结构为

<div class="container">
<div class="row gy-5">

    <div class="col-lg-6">
        <div class="card m-b-30">
            <div class="card-body py-5">
                <div class="row">
                    <div class="col-lg-4 text-center">            
                    <img src="/static/logo.png" alt="logo" >            
                    </div>
                <div class="col-lg-8">
                    <h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
                    <p class="card-text">CDD IT Informatique</p>
                    <hr class="dropdown-divider">                
                    <p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>        
                    <p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>        
                    <p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
               </div>
                </div>
              </div>
        </div>
    </div>
    
    ...

在大屏幕上,它按列显示两张卡片。

问题是卡片有时高度不同。 例如,对于用户 2,他的角色更改为:“Enseignant Chercheur Astrophysicalque Hautes Energies”而不是“CDD IT Informatique”,因此这一行需要两行而不是一行。因此用户 2 的卡片的高度与其他卡片不同。

我该如何解决它? 我不知道卡片的大小,所以我无法隐式修复它(无论如何,这可能不是一个好主意)。

P.S.:如果徽标尺寸不同,我也会遇到同样的问题。尽管使用了 img-fluid、widht、max-widht、max-height 等,但有些徽标会改变卡片的高度。但我认为首先我必须解决简单的高度问题。

P粉358281574
P粉358281574

全部回复(2)
P粉381463780
Code snippet



.card {
  height: 100%;
}




This will set the height of all cards to 100% of their parent container. This will ensure that all cards have the same height, regardless of the content inside them.

To fix the problem of the logos having different sizes, you can use the following CSS:



Code snippet
.card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}




This will set the maximum width and height of the logos to 100%. This will ensure that the logos are never larger than their parent container. The object-fit: cover property will ensure that the logos are scaled to fill their container, without distorting their aspect ratio.

I hope this helps
P粉920485285

col 元素已经具有相同的高度 - Bootstrap v5 基于 Flexbox 的网格实现已经做到了这一点。

您需要做的就是使卡片占据其父卡片的 100% 高度:

.card { height: 100%; }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号