如何使用Bootstrap让不同内容的两张卡片同步缩放并保持等高

要实现你需要的效果，只需针对卡片高度同步和表格滚动做两处核心调整，结合Bootstrap内置类与少量自定义CSS即可完成：

一、实现两卡片同步等高 #

Bootstrap栅格基于Flex布局，通过以下类就能让卡片始终保持同高：

• 给第一行的两个<div class="col">添加h-100，让列占满行的高度；
• 给每个<div class="card">添加h-100，让卡片充满所在列的高度；
• 卡片内部使用d-flex flex-column，搭配flex-grow-1让card-body填充卡片剩余空间，避免内容高度差异导致的卡片高度不一致。

二、实现表格垂直滚动 #

给右侧卡片的card-body设置最大高度与垂直滚动属性，当表格内容超过该高度时自动滚动：

• 自定义CSS给.table-card-body设置max-height（可根据需求调整数值）和overflow-y: auto；
• 表格保留Bootstrap的table类，确保样式正常。

修改后的完整代码 #

CSS 部分 #

/* 表格单元格样式保留你的原有设置 */
table.table>tbody>tr>td {
  padding: 0 !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  border: none !important;
  border-spacing: 0 !important;
}

/* 表格卡片的滚动容器 */
.table-card-body {
  max-height: 400px; /* 此处设置你需要的特定高度 */
  overflow-y: auto;
}

/* 左侧图片容器的间距调整（可选） */
.image-col {
  padding: 0.5rem;
}

HTML 部分 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" />
  <title>Bootstrap 卡片等高与表格滚动示例</title>
</head>

<body>
  <div class="container-fluid py-3">
    <!-- 第一行：两列等高卡片 -->
    <div class="row g-3">
      <!-- 左侧卡片：两张并排图片 -->
      <div class="col-md-6 h-100">
        <div class="card h-100 d-flex flex-column">
          <div class="card-body flex-grow-1">
            <div class="row">
              <div class="col-6 image-col">
                <div class="ratio ratio-16x9">
                  <img src="https://picsum.photos/seed/img1/1920/1080" class="w-100 h-100 object-fit-cover" alt="图片1">
                </div>
              </div>
              <div class="col-6 image-col">
                <div class="ratio ratio-16x9">
                  <img src="https://picsum.photos/seed/img2/1920/1080" class="w-100 h-100 object-fit-cover" alt="图片2">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧卡片：可滚动表格 -->
      <div class="col-md-6 h-100">
        <div class="card h-100 d-flex flex-column">
          <div class="card-body table-card-body flex-grow-1">
            <table id="data_table" class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>项目</th>
                  <th>数值</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody id="table_body">
                <!-- 示例多行数据，用于测试滚动 -->
                <tr><td>1</td><td>传感器A</td><td>25.6℃</td><td>正常</td></tr>
                <tr><td>2</td><td>传感器B</td><td>68%</td><td>正常</td></tr>
                <tr><td>3</td><td>传感器C</td><td>12.3kPa</td><td>正常</td></tr>
                <tr><td>4</td><td>传感器D</td><td>45.1℃</td><td>正常</td></tr>
                <tr><td>5</td><td>传感器E</td><td>72%</td><td>正常</td></tr>
                <tr><td>6</td><td>传感器F</td><td>15.7kPa</td><td>正常</td></tr>
                <tr><td>7</td><td>传感器G</td><td>28.9℃</td><td>正常</td></tr>
                <tr><td>8</td><td>传感器H</td><td>62%</td><td>正常</td></tr>
                <tr><td>9</td><td>传感器I</td><td>11.2kPa</td><td>正常</td></tr>
                <tr><td>10</td><td>传感器J</td><td>31.4℃</td><td>正常</td></tr>
                <tr><td>11</td><td>传感器K</td><td>75%</td><td>正常</td></tr>
                <tr><td>12</td><td>传感器L</td><td>16.8kPa</td><td>正常</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行、第三行：自定义内容 -->
    <div class="row mt-3">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <p>第二行内容</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <p>第三行内容</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

关键细节说明 #

1. 等高卡片：h-100让列和卡片继承父容器高度，d-flex flex-column配合flex-grow-1确保card-body填充卡片内部剩余空间，无论内容多少都能保持卡片高度一致。
2. 图片比例与并排：ratio-16x9固定图片宽高比，col-6实现两张图片并排，object-fit-cover确保图片拉伸时不变形。
3. 表格滚动：.table-card-body设置最大高度，overflow-y: auto在内容超出时显示垂直滚动条，flex-grow-1让滚动容器占满卡片剩余高度。

内容的提问来源于stack exchange，提问作者Pedro Carvalho