Bootstrap 5两栏布局问题：图片后文本如何自动铺满整行？

你要的这种文本绕排、超出后铺满整行的效果，用默认的row是做不到的——因为row是flex布局，两列会各自保持独立的宽度，文本没法绕到图片下方。换成浮动布局结合Bootstrap的宽度类就能实现，完全不用加额外HTML：

<div class="container">
  <div class="float-start col-md-3 col-lg-4 mb-3 mb-md-0">
    IMAGE <!-- 替换成你的图片元素 -->
  </div>
  <div>
    TEXT <!-- 你的长文本内容 -->
  </div>
</div>

类作用说明： #

• float-start：让图片容器左浮动，文本自然环绕在它右侧
• col-md-3 col-lg-4：控制图片在中等/large屏幕下的宽度，和你需求一致
• mb-3 mb-md-0：移动端给图片加底部间距（避免文本紧贴），中等及以上屏幕去掉间距，保持布局紧凑

这样在md/lg及以上屏幕，图片占左侧3/4列，文本占右侧剩余宽度；当文本内容超过图片高度后，会自动铺满整个容器宽度，正好是你要的效果。

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