Bootstrap中实现段落环绕图片布局的问题求助

我希望段落能够环绕图片排列以节省空间，当前使用的代码如下：

<div class="container">
  <div class="row">
    <div class="col-6">
      <h1 class="display-4">Lorem ipsum</h1>
      <p class="lead">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <a href="#" class="btn btn-outline-dark rounded-pill">התחל לכתוב</a>
    </div>
    <div class="col-6">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.YrOgCeeTMGooIg3gpMz8qgHaHa%26pid%3DApi&f=1&ipt=8172a3c985e7c4343b252d0ccaa06f7c36f146a5f6ce4f20fc7c801bf5ce2974&ipo=images" alt="Round Image" class="rounded-circle">
    </div>
  </div>
</div>

我尝试将图片放在段落下方，但依然无法实现段落环绕图片的效果，当前效果如下：

解决方案 #

你当前用Bootstrap栅格的col-6把文本和图片拆成了两个独立的块级列，这种布局是并排分隔，自然无法实现文字环绕。要达成目标，需要让图片和文本处于同一容器，并利用CSS浮动或Bootstrap内置样式实现环绕。

方法1：使用浮动样式（最直接） #

将图片移入文本所在容器，添加浮动和间距类：

<div class="container">
  <div class="row">
    <div class="col-12"> <!-- 改为单列容器，容纳文本和图片 -->
      <!-- 给图片添加浮动、间距和尺寸控制 -->
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.YrOgCeeTMGooIg3gpMz8qgHaHa%26pid%3DApi&f=1&ipt=8172a3c985e7c4343b252d0ccaa06f7c36f146a5f6ce4f20fc7c801bf5ce2974&ipo=images" 
           alt="Round Image" 
           class="rounded-circle float-start me-3"
           style="width: 200px; height: 200px;">
      <h1 class="display-4">Lorem ipsum</h1>
      <p class="lead">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <a href="#" class="btn btn-outline-dark rounded-pill">התחל לכתוב</a>
    </div>
  </div>
</div>

方法2：使用Bootstrap媒体对象（结构化布局） #

如果需要更清晰的语义化结构，可使用Bootstrap媒体组件：

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="media">
        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.YrOgCeeTMGooIg3gpMz8qgHaHa%26pid%3DApi&f=1&ipt=8172a3c985e7c4343b252d0ccaa06f7c36f146a5f6ce4f20fc7c801bf5ce2974&ipo=images" 
             class="rounded-circle me-3 align-self-start" 
             alt="Round Image"
             style="width: 200px; height: 200px;">
        <div class="media-body">
          <h1 class="display-4">Lorem ipsum</h1>
          <p class="lead">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
          <a href="#" class="btn btn-outline-dark rounded-pill">התחל לכתוב</a>
        </div>
      </div>
    </div>
  </div>
</div>

核心要点： #

• 栅格col-6的分隔布局会让元素独立，无法实现环绕，必须将图片和文本放在同一容器内。
• float-start（Bootstrap类）对应CSS的float: left，使图片左浮，文本自动环绕；如需右环绕，替换为float-end。
• me-3用于给图片右侧添加间距，避免文本与图片紧贴。

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