实现无绝对高度的Bootstrap折叠「查看更多」功能

核心思路 #

放弃固定高度方案，利用Flex布局让内容区域自动填充垂直空间，结合max-height和CSS过渡实现平滑折叠，同时保证图片不缩放、按钮与图片底部对齐。

实现代码 #

HTML结构

<div class="card h-100">
  <div class="row g-0 h-100">
    <!-- 图片区域：固定宽度，高度填满卡片 -->
    <div class="col-md-4">
      <img src="your-image-path.jpg" class="img-fluid h-100 object-fit-cover" alt="卡片图片">
    </div>
    <!-- 内容区域：Flex垂直布局，自动填充剩余空间 -->
    <div class="col-md-8 d-flex flex-column">
      <div class="card-body flex-grow-1">
        <h5 class="card-title">示例卡片标题</h5>
        <!-- 折叠内容容器：默认填充空间，超出隐藏 -->
        <div class="collapse-partial overflow-hidden transition-all" style="max-height: calc(100% - 2.5rem);">
          <p class="card-text">这里是需要折叠的长文本内容，默认状态下会填满卡片的垂直剩余空间，超出部分自动隐藏。这里是需要折叠的长文本内容，默认状态下会填满卡片的垂直剩余空间，超出部分自动隐藏。这里是需要折叠的长文本内容，默认状态下会填满卡片的垂直剩余空间，超出部分自动隐藏。这里是需要折叠的长文本内容，默认状态下会填满卡片的垂直剩余空间，超出部分自动隐藏。</p>
          <p class="card-text"><small class="text-body-secondary">最后更新于 1 小时前</small></p>
        </div>
      </div>
      <!-- 按钮区域：自动对齐到底部 -->
      <div class="card-footer border-0 bg-transparent">
        <button class="btn btn-primary toggle-btn" type="button">查看更多</button>
      </div>
    </div>
  </div>
</div>

CSS样式

/* 平滑过渡效果 */
.transition-all {
  transition: max-height 0.3s ease;
}
/* 展开状态：取消高度限制 */
.collapse-partial.expanded {
  max-height: none !important;
}

JavaScript交互

// 绑定折叠切换事件
document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const collapseEl = this.closest('.col-md-8').querySelector('.collapse-partial');
    collapseEl.classList.toggle('expanded');
    // 切换按钮文字
    this.textContent = collapseEl.classList.contains('expanded') ? '收起' : '查看更多';
  });
});

关键细节说明 #

• 图片不缩放：给图片添加h-100 object-fit-cover，让图片填满容器且保持比例，不会拉伸变形
• 内容自适应填充：内容列用d-flex flex-column，card-body加flex-grow-1，自动占据卡片剩余垂直空间
• 折叠逻辑：默认用max-height: calc(100% - 2.5rem)减去按钮区域高度，保证内容不覆盖按钮；展开时取消高度限制，显示全部内容
• 按钮对齐：按钮放在card-footer，借助Flex布局自动和图片底部对齐，无需手动调整位置

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