如何在HTML、Bootstrap 4中实现同排左右不同尺寸卡片布局？

以下是适配你需求的Bootstrap 4卡片布局代码，采用栅格系统配合卡片组件，实现响应式排列，适配不同屏幕尺寸：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap 4 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <title>Bootstrap 4卡片布局</title>
</head>
<body>
  <div class="container py-4">
    <!-- 卡片行容器 -->
    <div class="row">
      <!-- 卡片1 -->
      <div class="col-md-4 col-sm-6 mb-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这里是卡片的核心内容区域，可根据实际需求填充文本、图片或其他元素。</p>
          </div>
          <div class="card-footer bg-light">
            <button class="btn btn-outline-primary btn-sm">查看详情</button>
          </div>
        </div>
      </div>
      <!-- 卡片2 -->
      <div class="col-md-4 col-sm-6 mb-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这里是卡片的核心内容区域，可根据实际需求填充文本、图片或其他元素。</p>
          </div>
          <div class="card-footer bg-light">
            <button class="btn btn-outline-primary btn-sm">查看详情</button>
          </div>
        </div>
      </div>
      <!-- 卡片3 -->
      <div class="col-md-4 col-sm-6 mb-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这里是卡片的核心内容区域，可根据实际需求填充文本、图片或其他元素。</p>
          </div>
          <div class="card-footer bg-light">
            <button class="btn btn-outline-primary btn-sm">查看详情</button>
          </div>
        </div>
      </div>
      <!-- 卡片4 -->
      <div class="col-md-4 col-sm-6 mb-4">
        <div class="card shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">这里是卡片的核心内容区域，可根据实际需求填充文本、图片或其他元素。</p>
          </div>
          <div class="card-footer bg-light">
            <button class="btn btn-outline-primary btn-sm">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap 4依赖的JS -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键特性说明 #

• 响应式适配：col-md-4 col-sm-6实现中等屏幕每行3张卡片、小屏幕每行2张卡片，超小屏幕自动堆叠
• 统一高度：h-100类确保同一行内的卡片高度一致，避免布局错乱
• 视觉优化：shadow-sm添加柔和阴影，mb-4设置卡片间距，bg-light底部栏区分内容区域
• 可扩展性：可直接复制卡片模块添加更多内容，也可通过修改栅格类（如col-lg-3）调整每行卡片数量

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