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

Question

我想要做的是将占位符图像移动到文本右侧的空间。

我已经尝试了几种解决方案，包括向图像添加不同的类、删除嵌套容器等，但没有任何方法可以将图像移动到文本旁边。图像根据左列的 col-x 调整大小，但拒绝向上移动。从我在 Bootstrap 文档和我使用 Flexbox 的经验中可以看出，这似乎应该有效，但我想我遗漏了什么？谁能帮忙？

这是我的页面的图像：

<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'>
    <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 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>
      <div class='col-4'>
        <img src='https://via.placeholder.com/100' class='img-fluid' alt='placeholder image'>
      </div>
    </div>

Answer 1

在我看来，问题在于您在整体结构上犯了一个错误。包含图像的前 8 个单位列和第 4 个单位列应位于同一行。我在后者之前添加了一个缺少的结束 div 标签来实现这一点。

我不确定这是你想要的，因为你的规格有点含糊。不过，我的建议是从外部开始任何布局，首先建立您的主要结构，然后添加内部结构。如果您一次只做一步，就很容易看出哪里出了问题。

<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'>
    <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 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>
    </div>

    <div class='col-4'>
      <img src='https://via.placeholder.com/100' class='img-fluid' alt='placeholder image'>
    </div>
  </div>
</div>

Answer 2

<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'>
    <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-8'>
            <p>This is a description of the project, its goals, its challenges, the technologies it uses.</p>
          </div>
          <div class='col-4'>
            <img src='https://via.placeholder.com/100' class='img-fluid' alt='placeholder image'>
          </div>
        </div>
      </div>
    </div>