如何使用 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>

Answer 3

 <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>