怎么用Bootstrap卡片制作图文列表-Bootstrap教程-PHP中文网

卡片必须用.card包裹且遵循标准结构：.card→.card-img-top→.card-body；图片需用object-fit:cover配合固定高度；图文列表用.row+.col-*而非废弃的.card-deck。

怎么用bootstrap卡片制作图文列表

卡片结构必须用 `.card` 包裹，不能只靠 CSS 模拟

直接写 <div class="card"> 是最低要求，否则 Bootstrap 的响应式间距、圆角、阴影等样式不会生效。常见错误是套了一层自定义 class 就以为能替代 <code>.card，结果在小屏下卡片堆叠错乱、图片溢出、文字不换行——这些基本都是没用对容器导致的。

标准结构要严格遵循：.card → .card-img-top（图片）→ .card-body（文字内容）。图片必须放在 .card-img-top 或 .card-img-bottom 里，否则无法自动适配宽高比，尤其在 Flex 布局中容易撑破卡片。

`.card-img-top` 的图片尺寸和加载方式很关键

Bootstrap 不处理图片本身，所以你得自己控制尺寸和加载行为。默认 .card-img-top 是块级元素、宽度 100%，但高度由图片原始比例决定。如果图片高宽比不统一，列表会参差不齐。

推荐统一用 object-fit: cover 配合固定高度（如 height: 180px），避免拉伸变形
不要依赖 img width/height 属性，它会破坏响应式；改用 CSS 控制
懒加载请用 loading="lazy"，但注意 Safari 旧版本不支持，可加 data-src + JS 回填作为降级

图文列表用 `.row` + `.col-*` 布局，别用 `.card-deck`

.card-deck 已在 Bootstrap 5 中被废弃，且它强制所有卡片等高，在图文列表里反而让短文本卡片底部留大片空白。正确做法是用 .row 包裹，每个卡片放在 .col-md-4 或 .col-lg-3 里，靠栅格系统控制列数。

示例结构：

<div class="row">
  <div class="col-md-4">
    <div class="card">
      @@##@@
      <div class="card-body">
        <h5 class="card-title">标题</h5>
        <p class="card-text">描述文字</p>
      </div>
    </div>
  </div>
  <!-- 更多 col -->
</div>

注意：如果卡片内有按钮或链接，确保 .card-link 或 a.btn 放在 .card-body 内，否则点击区域可能失效。