如何使用Bootstrap5將影像對齊到文本塊的右側？

我想要做的是將占位符影像移動到文本右側的空間。

我已經嘗試了幾種解決方案，包括向影像添加不同的類、洗掉嵌套容器等，但沒有任何方法可以將影像移動到文本旁邊。影像根據左列的 col-x 調整大小，但拒絕向上移動。從我在 Bootstrap 檔案和我使用 Flexbox 的經驗中可以看出，這似乎應該有效，但我想我遺漏了什么？誰能幫忙？

這是我的頁面的影像：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

在我看來，問題在于您在整體結構上犯了一個錯誤。包含影像的前 8 個單位列和第 4 個單位列應位于同一行。我在后者之前添加了一個缺少的結束 div 標簽來實作這一點。

我不確定這是你想要的，因為你的規格有點含糊。不過，我的建議是從外部開始任何布局，首先建立您的主要結構，然后添加內部結構。如果您一次只做一步，就很容易看出哪里出了問題。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：网页格式CSS推特引导程序

上一篇：如何在Bootstrap中嵌套網格

下一篇：Bootstrap標簽輸入復制粘貼值不顯示整個值