如何使用Bootstrap 4实现文字环绕图片效果？

你的问题出在没有利用Bootstrap的浮动类来实现文字环绕，反而用了相对定位调整图片位置，这自然达不到你想要的文字环绕效果。下面给你两种可行的解决方案，都是基于Bootstrap 4自带的类，不用额外写自定义样式：

基础实现（固定浮动方向） #

直接给图片添加Bootstrap的浮动类和间距类，就能轻松实现文字环绕：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="alert alert-warning" role="alert">
    <img class="img-fluid float-left mr-3" src="https://i.imgur.com/JgqPv7T.png">
    Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  </div>
</div>

这里用到的关键类：

• float-left：让图片向左浮动，文字会自动环绕在图片右侧
• mr-3：给图片右侧添加3个单位的外边距，避免文字和图片紧贴在一起
• img-fluid：保证图片在不同屏幕尺寸下能自适应缩放，保持响应式

如果想要图片靠右、文字环绕在左侧，只需要把float-left换成float-right，mr-3换成ml-3即可。

响应式优化（小屏幕取消浮动） #

如果希望在小屏幕设备上，图片能占满宽度、文字自动换行到图片下方，可以使用Bootstrap的响应式浮动类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="alert alert-warning" role="alert">
    <img class="img-fluid float-left float-sm-none mr-sm-0 mr-3" src="https://i.imgur.com/JgqPv7T.png">
    Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  </div>
</div>

这里新增的类：

• float-sm-none：在屏幕宽度≥576px（sm断点）时取消浮动，图片会占满容器宽度
• mr-sm-0：在sm及以上屏幕时取消右侧外边距，避免多余间距

这样调整后，在手机等小屏幕上的浏览体验会更友好。

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