如何使用Bootstrap 5将图片对齐到文本块右侧？

你的代码核心问题是图片所在的col-4被错误嵌套在col-8内部，Bootstrap栅格系统要求同一行的列必须直接作为row的子元素，不能互相嵌套，这才导致图片无法和左侧文本区域并列，只能被挤到下方。

修正后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class='container'>
  <hr />
  <!-- begin template -->
  <div class='row'>
    <!-- 左侧文本区域，占8列 -->
    <div class='col-8'>
      <div class='container-fluid p-0'>
        <div class='row'>
          <div class='col'>
            <h3>Project Name</h3>
          </div>
          <div class='col text-end'>
            <p>Project Status</p>
          </div>
        </div>
        <div class='row'>
          <div class='col'>
            <p><i class='fa fa-arrow-right'></i> Tech 1, Tech 2, Tech 3</p>
          </div>
        </div>
        <div class='row'>
          <div class='col'>
            <p>This is a description of the project, its goals, its challenges, the technologies it uses.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧图片区域，占4列，和左侧col-8同级 -->
    <div class='col-4'>
      <img src='https://via.placeholder.com/100' class='img-fluid' alt='placeholder image'>
    </div>
  </div>
</div>

同时还修正了内部嵌套的row结构——你原本把描述文本的row嵌套在了技术栈的row里，这会导致布局层级混乱，现在已调整为同级row，保证结构更清晰。

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