如何在Bootstrap 5中实现文字环绕右对齐图片效果

失效原因 #

当前布局将文本和图片拆分到两个独立的.col网格列中，Bootstrap 5 网格默认基于 Flex 布局，两个列是完全独立的平行区块，浮动效果无法跨容器生效，因此设置float: right也无法实现环绕效果。

解决方案 #

将图片移入文本所在的列容器内，使用 Bootstrap 5 自带的工具类实现效果，无需额外写自定义 CSS。

修改后完整代码 #

<section id="about" class="about">
  <div class="container">
    <div class="row">
      <div class="col-12 pt-4 pt-lg-0">
        <h3>Over mij</h3>
        <br />
        <img src="assets/img/fotokristin.jpg" class="img-fluid imgshadow float-end ms-3 mb-3" alt="个人照片">
        <p>
          ... text ...
        </p>
        <!-- 后续所有段落都会自动环绕图片 -->
      </div>
    </div>
  </div>
</section>
<!-- End About Section -->

参数说明 #

• 移除了原本独立存放图片的.col-lg-5列，把图片直接放在文本段落的前侧，保证二者在同一个布局容器内
• 给图片添加 Bootstrap 原生的.float-end类实现右浮动，替代自定义的float: right属性
• 添加.ms-3（左侧外边距）、.mb-3（底部外边距）控制图片和文字的间距，避免内容紧贴
• 如需响应式适配，可将.float-end替换为.float-lg-end，即可实现仅在 lg 及以上尺寸的大屏幕右浮动，小屏幕下图片默认占满整行，文字显示在图片下方
• 如果浮动后父容器出现高度塌陷，给文本所在的列容器添加.clearfix类即可快速清除浮动

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