求助：如何用Bootstrap实现博客网站指定样式的卡片布局？

你可以通过调整Bootstrap的网格结构，用单个容器行包裹所有卡片，配合列宽和偏移实现截图中的布局，同时优化卡片的高度对齐。以下是调整后的代码（基于React Bootstrap）：

<div className="container my-4">
  <div className="row g-4">
    {/* 左侧大卡片 */}
    <div className="col-md-8">
      <Card className="h-100">
        <img className="card-img-top" src={activity.image[0].url} alt="" />
        <Card.Body>
          <Card.Title>Title</Card.Title>
          <Card.Text>$Price</Card.Text>
          <Button className='btn-gallery'>See Blog</Button>
        </Card.Body>
      </Card>
    </div>
    {/* 右上角小卡片 */}
    <div className="col-md-4">
      <Card className="h-100">
        <Card.Body>
          <Card.Title>Title</Card.Title>
          <Card.Text>$Price</Card.Text>
          <Button className='btn-gallery'>See Blog</Button>
        </Card.Body>
      </Card>
    </div>
    {/* 左下角小卡片 */}
    <div className="col-md-4 offset-md-2">
      <Card className="h-100">
        <Card.Body>
          <Card.Title>Title</Card.Title>
          <Card.Text>$Price</Card.Text>
          <Button className='btn-gallery'>See Blog</Button>
        </Card.Body>
      </Card>
    </div>
    {/* 右下角小卡片 */}
    <div className="col-md-4">
      <Card className="h-100">
        <Card.Body>
          <Card.Title>Title</Card.Title>
          <Card.Text>$Price</Card.Text>
          <Button className='btn-gallery'>See Blog</Button>
        </Card.Body>
      </Card>
    </div>
    {/* 底部大卡片 */}
    <div className="col-md-8 offset-md-2">
      <Card className="h-100">
        <img className="card-img-top" src={activity.image[0].url} alt="" />
        <Card.Body>
          <Card.Title>Title</Card.Title>
          <Card.Text>$Price</Card.Text>
          <Button className='btn-gallery'>See Blog</Button>
        </Card.Body>
      </Card>
    </div>
  </div>
</div>

关键调整说明 #

• 使用**单个row**包裹所有卡片，避免多row导致的布局割裂问题
• g-4：设置卡片间的统一间距，符合Bootstrap的间距规范
• h-100：让卡片在所在列内撑满高度，保证同一行的卡片底部对齐
• 列布局逻辑：
  • 第一行：左侧卡片占8列（col-md-8），右侧小卡片占4列（col-md-4）
  • 第二行：两个小卡片各占4列，通过offset-md-2实现居中对齐
  • 底部：大卡片占8列，offset-md-2实现居中

如果需要模拟截图中卡片高度错落的效果，可以去掉h-100，并添加自定义CSS调整卡片最小高度：

/* 自定义卡片高度，模拟错落感 */
.card:nth-child(1) { min-height: 400px; }
.card:nth-child(2) { min-height: 200px; }
.card:nth-child(3) { min-height: 200px; }
.card:nth-child(4) { min-height: 200px; }
.card:nth-child(5) { min-height: 320px; }

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