Bootstrap4 卡片（千字长文）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代网页设计中，卡片（Card）已成为一种重要的信息展示组件。无论是电商商品列表、博客文章摘要，还是社交媒体动态，卡片都能以简洁直观的方式呈现内容。Bootstrap4 卡片作为框架内置的核心组件，凭借其灵活的布局能力和丰富的样式选项，成为开发者构建响应式页面的得力工具。本文将从基础用法到高级技巧，逐步解析如何通过Bootstrap4 卡片实现高效开发，并通过实际案例帮助读者掌握关键知识点。

一、Bootstrap4 卡片的基础结构

1.1 卡片的基本 HTML 结构

卡片的 HTML 结构由外层容器 .card 和内部元素（如标题、内容、图片等）组成。其核心是 盒模型设计，通过嵌套不同类名实现功能分区。

<div class="card">
  <img src="..." class="card-img-top" alt="图片描述">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容...</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

类名解析：

• .card：定义卡片容器，包含默认阴影和边框。
• .card-img-top：将图片固定在卡片顶部，自动适配宽度并保留比例。
• .card-body：包裹文本和按钮的内层容器，提供内边距和垂直对齐。

1.2 卡片的标题与内容组合

卡片支持多种内容类型，通过组合 .card-title、.card-subtitle、.card-text 等类名，可快速构建信息层级：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">产品名称</h5>
    <h6 class="card-subtitle mb-2 text-muted">产品分类</h6>
    <p class="card-text">价格：¥99.00</p>
    <a href="#" class="card-link">查看详情</a>
  </div>
</div>

设计比喻：卡片就像一本杂志的一页，标题是页眉，正文是主要内容，而按钮或链接则是引导读者行动的“路标”。

二、卡片的自定义与样式扩展

2.1 修改卡片背景与边框

通过覆盖 Bootstrap 默认样式，可以定制卡片的颜色和视觉效果。例如，为卡片添加背景色和圆角边框：

.custom-card {
  background-color: #f8f9fa; /* 浅灰色背景 */
  border-radius: 1rem;       /* 较大的圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
}

<div class="card custom-card">
  <!-- 内容 -->
</div>

技巧：使用 box-shadow 属性可增强卡片的悬浮感，而 border-radius 则能打破矩形的僵硬感。

2.2 响应式图片与内容适配

卡片中的图片可通过 .card-img-top 自动适配容器宽度，但若需控制高度，可结合 CSS 的 object-fit 属性：

<img src="..." class="card-img-top" style="height: 200px; object-fit: cover;" alt="...">

关键点：object-fit: cover 会保持图片比例并裁剪超出部分，确保视觉完整。

三、卡片布局与排版技巧

3.1 使用网格系统排列卡片

通过 Bootstrap 的网格类 .row 和 .col-*，可轻松实现卡片的水平排列。例如两列布局：

<div class="row">
  <div class="col-md-6">
    <div class="card">卡片内容</div>
  </div>
  <div class="col-md-6">
    <div class="card">卡片内容</div>
  </div>
</div>

设计比喻：网格系统如同乐高积木，.col-md-6 表示“占据中等屏幕的一半宽度”，通过组合不同列数可构建复杂布局。

3.2 处理卡片高度不一致的问题

若卡片内容长度不同，可通过 flexbox 布局强制对齐：

<div class="row align-items-stretch">
  <div class="col-md-4">
    <div class="card h-100">...</div>
  </div>
  <!-- 其他列 -->
</div>

关键类：

• .h-100：使卡片高度占满父容器的 100%。
• .align-items-stretch：让所有卡片在垂直方向上拉伸至相同高度。

四、响应式设计与交互增强

4.1 响应式卡片的显示逻辑

通过媒体查询或 Bootstrap 的断点类，可定义卡片在不同屏幕尺寸下的行为。例如，在移动设备上隐藏按钮：

<div class="card">
  <div class="card-body">
    <p class="card-text">...</p>
    <button class="btn btn-success d-none d-md-block">仅在中等及以上屏幕显示</button>
  </div>
</div>

类名含义：

• .d-none：隐藏元素。
• .d-md-block：在中等（md）及以上屏幕显示为块级元素。

4.2 动态交互：折叠式卡片内容

使用 Bootstrap 的 Collapse 插件，可实现卡片内容的动态展开/收起：

<div class="card">
  <div class="card-header">
    <h5 class="mb-0">
      <a data-toggle="collapse" href="#collapseExample">点击查看详细信息</a>
    </h5>
  </div>
  <div id="collapseExample" class="collapse">
    <div class="card-body">
      这里是隐藏的内容...
    </div>
  </div>
</div>

技术点：需引入 Bootstrap 的 JavaScript 插件文件，并通过 data-toggle 和 href 属性绑定交互。

五、常见问题与解决方案

5.1 卡片内容溢出或换行异常

若文本超出容器宽度，可添加 text-wrap 或 text-overflow 样式：

.card-text {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
}

5.2 图片与文本的垂直对齐

当卡片包含图片和文字时，使用 Flex 布局可实现精准对齐：

<div class="card d-flex align-items-center">
  <img src="..." class="mr-3" style="width: 64px;">
  <div>
    <h5>标题</h5>
    <p>描述文本...</p>
  </div>
</div>

结论

Bootstrap4 卡片凭借其标准化的结构和强大的扩展性，已成为构建现代网页不可或缺的工具。从基础卡片的搭建到复杂布局的实现，开发者可通过组合类名、覆盖样式以及结合 JavaScript 插件，快速满足不同场景需求。无论是电商商品展示、博客文章摘要，还是信息卡片墙，掌握本文的技巧将显著提升开发效率。建议读者通过实际项目实践，逐步探索卡片组件的更多可能性，并结合设计原则优化用户体验。