Bootstrap horizontal card高度控制与展开按钮实现问题

需求说明 #

实现带高度限制的Bootstrap水平卡片，具备以下特性：

• 左侧.col-4区域的图片使用object-fit:cover保持比例填充
• 右侧卡片内容支持任意长度，点击“Read more”可移除高度限制展开全部内容

当前问题 #

• .long-content 内容与左侧图片重叠
• .card 层级设置的height属性不生效，内容溢出卡片
• 图片父元素重复设置height，代码冗余不优雅
• 无法自动判断内容是否溢出，“Read more”链接始终显示

修正后的完整实现代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .card-collapsed {
            max-height: 200px;
            overflow: hidden;
        }
        .long-content {
            overflow-y: auto;
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div class="card mb-3 card-collapsed">
  <div class="row g-0 h-100">
    <div class="col-4 h-100">
      <img src="https://dummyimage.com/400x700/000/fff" class="img-fluid rounded-start object-fit-cover h-100" style="object-position: center;">
    </div>
    <div class="col-8 d-flex flex-column">
      <div class="card-body d-flex flex-column h-100">
        <div class="long-content mb-3">
          <p>
            Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis, at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis,
          </p> 
          <p>
            at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
          </p>
          <p>
            at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
          </p>
          <p>
            at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
          </p>
        </div>
        <div class="read-more text-primary cursor-pointer">Read more</div>
      </div>
    </div>
  </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const card = document.querySelector('.card');
        const longContent = document.querySelector('.long-content');
        const readMoreBtn = document.querySelector('.read-more');

        // 判断内容是否溢出，隐藏不必要的按钮
        if (longContent.scrollHeight <= longContent.clientHeight) {
            readMoreBtn.style.display = 'none';
        }

        // 切换卡片展开/折叠状态
        readMoreBtn.addEventListener('click', function() {
            card.classList.toggle('card-collapsed');
            readMoreBtn.textContent = card.classList.contains('card-collapsed') ? 'Read more' : 'Read less';
        });
    });
</script>
</body>
</html>

问题解决细节 #

1. 内容与图片重叠修复：给右侧列添加d-flex flex-column类，让.card-body内部垂直弹性布局；给.long-content设置flex-grow:1，使其自动填充剩余空间，同时添加overflow-y:auto在折叠状态下支持滚动。

2. 卡片高度控制生效：用自定义类.card-collapsed设置max-height和overflow:hidden，替代直接给.card写内联height，通过JavaScript切换类实现动态高度，避免内容溢出。

3. 图片高度优化：使用Bootstrap内置的h-100类，让图片父元素和图片都继承卡片的高度，移除重复的内联height设置，代码更简洁。

4. 动态显示展开按钮：通过scrollHeight和clientHeight的对比，判断内容是否溢出，只有溢出时才显示“Read more”；点击按钮时切换卡片状态，同时更新按钮文字为“Read less”，提升交互体验。

内容的提问来源于stack exchange，提问作者Dan Gravell