用 float 实现文字环绕图片最直接有效，只需为图片添加 float-start me-3 类并确保父容器为普通块级流；避免父容器使用 overflow: hidden、flex 或 grid 布局，因其会创建 bfc 阻断浮动。
用 float 实现文字环绕图片（最直接有效）
Bootstrap 本身不提供“文字环绕图片”的专用类，但它的底层 CSS 支持标准浮动行为。只要图片加 float: left 或 float: right，配合合理 margin，文字自然会贴着绕排——这和 Bootstrap 版本无关，是原生 CSS 行为。
常见错误现象：img 加了 float，但文字没绕、反而整块下沉或错位。
原因通常是：父容器设置了 overflow: hidden（比如某些 .card 或 .container 的子元素）、或用了 display: flex / display: grid ——这些布局会创建 BFC，把浮动“截住”了。
实操建议：
- 给图片加
class="float-start me-3"（Bootstrap 5）或class="float-left mr-3"（Bootstrap 4），me-3提供右外边距，避免文字紧贴图片 - 确保图片的父容器是普通块级流（
display: block），不要额外加overflow: hidden或display: flex - 如果父容器是
.row或.d-flex，别把图片和文字塞进同一个 flex 容器里——换用普通<div> <h3>为什么不用 <code>shape-outside？shape-outside确实能实现更复杂的环绕（比如圆形、多边形轮廓），但它有硬性限制：只对浮动元素生效，且要求元素必须是块级、有明确尺寸、不能是内联元素。实际踩坑点：
-
img默认是内联元素，得先加display: block才能用shape-outside - Bootstrap 的响应式图片类（如
img-fluid）会让宽高变成百分比，而shape-outside需要固定尺寸（如shape-outside: circle(50%);在宽度变化时会失准） - IE 完全不支持，Edge 17+ 才开始支持，移动端兼容性也参差不齐
结论：除非你真需要非矩形环绕，否则别为绕图特地加
shape-outside——float更稳、更小、更可控。用
grid或flex模拟环绕？别试有人想用
display: grid把文字拆成多段，再手动定位到图片周围。这在技术上可行，但属于反模式：- 语义错乱：段落被强行切开，屏幕阅读器和 SEO 无法理解上下文
- 响应式灾难：一旦图片尺寸变化（比如从 col-4 缩到 col-12），所有网格轨道都要重写
- 维护成本高：每换一张图，就得调一次
grid-column和grid-row
Bootstrap 的
.row+.col是为栅格布局设计的，不是为图文混排。把它当“环绕工具”用，等于拿扳手拧螺丝——能转两圈，但很快滑丝。响应式下图片缩放导致环绕失效怎么办？
核心问题：图片加了
img-fluid后宽度随容器变，但float的环绕效果依赖物理尺寸。小屏下图片变窄，文字可能“挤”过去，贴得太近甚至重叠。解决思路不是禁用
img-fluid，而是用媒体查询微调间距：@media (max-width: 576px) { .float-start.me-3 { margin-right: 0.5rem; } } @media (min-width: 577px) { .float-start.me-3 { margin-right: 1rem; } }或者更简单：用 Bootstrap 的响应式间距工具类，比如
me-md-3 me-2——中屏及以上用大间距，小屏自动回退到小间距。真正容易被忽略的是：环绕效果是否在所有断点下都可读。尤其小屏，宁可让图片独占一行，也别强求环绕造成行高混乱或文字过窄。
-
