如何用Bootstrap在文本间不同位置实现多张响应式图片布局？

完全可以实现这个效果，用Bootstrap的网格系统+响应式工具类+简单定位就能搞定，具体实现步骤如下：

1. 基础结构搭建 #

先创建一个相对定位的容器承载文本和图片，避免图片偏移，再插入正文文本与四张图片，通过Bootstrap响应式类控制移动端的显示/隐藏逻辑：

<div class="container my-5">
  <div class="position-relative">
    <!-- 正文文本 -->
    <p class="lead">
      这里是你的正文内容，建议写一段足够长的文本，用来展示图片穿插的效果...（可根据实际需求补充内容）
    </p>

    <!-- 左侧图片1 - 桌面/移动端都显示 -->
    <img src="你的图片路径" alt="左侧图1" class="img-fluid position-absolute" style="top: 10%; left: -8%; max-width: 150px;">

    <!-- 左侧图片2 - 仅桌面显示 -->
    <img src="你的图片路径" alt="左侧图2" class="img-fluid position-absolute d-none d-md-block" style="bottom: 15%; left: -5%; max-width: 120px;">

    <!-- 右侧图片1 - 仅桌面显示 -->
    <img src="你的图片路径" alt="右侧图1" class="img-fluid position-absolute d-none d-md-block" style="top: 25%; right: -6%; max-width: 130px;">

    <!-- 右侧图片2 - 桌面/移动端都显示 -->
    <img src="你的图片路径" alt="右侧图2" class="img-fluid position-absolute" style="bottom: 10%; right: -7%; max-width: 140px;">
  </div>
</div>

2. 关键细节说明 #

• 定位控制：父容器加position-relative作为定位基准，图片用position-absolute，通过top/bottom/left/right调整每张图的位置，max-width限制图片尺寸防止溢出容器。
• 响应式隐藏：使用Bootstrap内置的d-none d-md-block类，实现移动端（<768px）隐藏、桌面端（≥768px）显示的效果，刚好满足你隐藏两张图的需求。
• 适配优化：图片加img-fluid保证自身能响应式缩放，父容器用container或container-fluid适配页面布局，my-5是Bootstrap间距类，控制容器上下外边距。

3. 额外调整建议 #

如果定位数值不够精准，可根据实际文本长度、图片尺寸，修改top/bottom/left/right的百分比或像素值；若需要更复杂的排版，也可以把文本拆分为多段，配合Bootstrap的网格列（col-md-*）实现，但上述方案已能快速达成你的需求。

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