bootstrap怎么给图片添加边框文字描述-Bootstrap教程-PHP中文网

Bootstrap 5 中需手动为 + 添加 CSS 样式才能正常显示，因已移除内置支持；推荐用包裹 .img-fluid.border.rounded 图片和 .mt-2.text-muted.small 文字描述。

Bootstrap 5 怎么给图片加边框和文字描述

直接用 .img-fluid + .border + .caption 组合就能实现，但要注意 bootstrap 5 已经移除了内置的 .figure 样式类支持，原生 <figure></figure> + <figcaption></figcaption> 需要手动补样式，否则文字不居中、边距错乱。

为什么 `<figure></figure>` + `<figcaption></figcaption>` 在 Bootstrap 5 里不自动生效

因为 Bootstrap 5 删除了对 figure 和 figcaption 的默认样式重置（v4 还有），现在它们走浏览器原生样式，导致：figcaption 默认是块级左对齐、无内边距、字体不缩放。必须自己加类或写少量 CSS。

.figure 不再是 Bootstrap 内置类，写了也无效
.text-center 只能居中文字，不能约束整个图+文容器宽度
.img-fluid 必须加在 <img> 上，否则响应式失效
如果图宽超父容器，<figcaption></figcaption> 可能换行错位，需配合 .text-wrap 或 white-space: normal

最简可行方案：用 <div> 模拟 figure 容器 <p>绕过语义标签兼容问题，用纯 class 控制，稳定、少踩坑。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><div class="text-center mb-3"> @@##@@ <div class="mt-2 text-muted small">这是图片的文字描述</div> </div></pre> <ul> <li> <code>.border 提供默认灰色边框；加 `.rounded` 更柔和
`.text-center` 确保图和文字都居中（注意：不是只给文字加）

`.mt-2` 控制文字离图距离，比 `margin-top: 0.5rem` 更可控

`.text-muted` 降低文字视觉权重，`.small` 缩小字号（等效 `font-size: 0.875rem`）

如果坚持用语义化 `<figure></figure>`，怎么补样式

需要一行额外 CSS 覆盖浏览器默认行为，否则在 Safari/Chrome/Firefox 表现不一致。

figure {
  margin: 0;
  text-align: center;
}
figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #6c757d;
}

必须重置 figure 的默认上下边距（浏览器通常给 1em）
figcaption 默认是 display: block，不用改，但 margin-top 比 margin-bottom 更安全——避免和后续段落粘连
不要用 !important，Bootstrap 的 .text-muted 优先级足够覆盖
如果项目已用 Sass，建议把这段塞进 _custom.scss，而非全局 style 标签