Bootstrap布局求助：响应式缩放时文本与图片重叠问题

问题根源 #

你遇到的重叠问题，本质是布局未做响应式适配：要么没利用Bootstrap的弹性/栅格系统控制元素的自适应规则，要么图片未设置响应式属性，导致小屏时文本容器挤压图片空间。

直接可用的修复代码 #

弹性布局方案（推荐，确保始终并排） #

这种方式不管屏幕大小，文本始终在图片右侧，同时自动适配宽度不重叠：

<div class="container py-4">
  <!-- 弹性容器：垂直居中对齐，强制不换行（如需极端小屏换行可换成flex-wrap） -->
  <div class="d-flex align-items-center">
    <!-- 图片容器：禁止收缩，保持宽度比例 -->
    <div class="flex-shrink-0 me-3">
      <img src="your-image-path.jpg" class="img-fluid" style="max-width: 250px;" alt="图片描述">
    </div>
    <!-- 文本容器：自动填充剩余空间，内容自动换行 -->
    <div class="flex-grow-1">
      <h4>你的标题</h4>
      <p>这里是需要放在图片右侧的文本内容，不管屏幕缩小到什么程度，都会保持在图片右侧，不会出现重叠。文本会根据剩余空间自动换行，图片也会保持合适的尺寸。</p>
      <p>补充的文本内容，用来验证自适应效果，确保小屏时布局依然正常。</p>
    </div>
  </div>
</div>

栅格布局方案（适合需要在特定断点换行的场景） #

如果你允许在极小屏时文本换行到图片下方，用栅格更符合Bootstrap的设计思路：

<div class="container py-4">
  <div class="row align-items-center">
    <!-- 图片：小屏占12列（单独一行），中屏及以上占4列 -->
    <div class="col-md-4 mb-3 mb-md-0">
      <img src="your-image-path.jpg" class="img-fluid" alt="图片描述">
    </div>
    <!-- 文本：小屏占12列，中屏及以上占8列 -->
    <div class="col-md-8">
      <h4>你的标题</h4>
      <p>这里是文本内容，中屏及以上在图片右侧，小屏时自动换行到图片下方，完全避免重叠。</p>
    </div>
  </div>
</div>

可选CSS优化（防止极端小屏挤压） #

如果需要强制所有屏幕都并排，添加以下CSS确保元素有最小宽度：

/* 限制图片最小宽度，避免过度缩小 */
.flex-shrink-0 img {
  min-width: 150px;
}
/* 给文本容器设置最小宽度，防止被挤到消失 */
@media (max-width: 576px) {
  .flex-grow-1 {
    min-width: 200px;
  }
}

关键修复要点 #

1. 用flex-shrink-0保护图片：避免图片被文本容器压缩变形或重叠
2. flex-grow-1让文本自适应：文本容器自动填充剩余空间，内容自动换行
3. img-fluid必须加：确保图片随容器宽度自适应，不会溢出
4. 间距类me-3：图片和文本之间留足空白，避免紧贴

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