在引導列中的圖像中環繞文本
[英]Wrapping Text Around in Image Within A Bootstrap Column
問題描述
對編碼非常陌生，希望對有關引導程序的布局問題有所幫助。
我在嘗試利用引導程序中的網格系統創建的列中都有一個圖像和一個段落元素。 我希望圖像向左浮動，然后讓文本坐在圖像的右側並繼續環繞底部以填充列的寬度。
我希望它看起來像的例子可以在這里看到：布局目標
然而，我目前的情況是文本只會位於圖像下方：布局當前
我在主容器中創建了一行，並在該行中創建了兩列。 一個被賦予 md-8 寬度（並保存我的圖像和段落元素），另一個被賦予 md-4 寬度並且只是一個空間持有者，因為我必須使我的內容成為容器寬度的 2/3。
我使用的代碼在這里：
<section class="row">
<div class="col-md-8 background-white py-3">
<img src="/assets/ProjectImages/AboutMe300299.jpg" class="rounded float-left" alt="Me and My Fam">
<p class="float-left"> <!--have to figure out how to wrap this-->
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
</p>
</div>
<div class="col-md-4">
<!--Space Holder-->
</div>
</section>
我正在使用推薦的浮動左 class 引導程序，並且還推薦在我讀到的同一列中包含圖像和段落元素。 關於更好的方法或我做錯了什么的任何想法？ 謝謝！
1 個解決方案
解決方案1
0 已采納 2020-12-15 02:08:54
我正在為 Bootstrap 4 和 Bootstrap 5 提供解決方案。有關更多詳細信息，我建議您查看 Bootstrap 的 web 站點中有關clearfix和w-100的文檔。
這是 Bootstrap 4 解決方案：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>Document</title> </head> <body> <section class="row"> <div class="col background-white py-3"> <div class="clearfix"> <img src="https.//picsum.photos/100/100" class="col-md-2 w-25 rounded float-left" alt="..:"> <p class="d-inline"> <.--have to figure out how to wrap this--> Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio </p> </div> </div> <div class="col-md-4"> <.--Space Holder--> </div> </section> <.-- <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> --> </body> </html>
這是 Bootstrap 5 解決方案：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min:css" rel="stylesheet"/> <title>Document</title> </head> <body> <section class="row"> <div class="col background-white py-3"> <div class="clearfix"> <img src="https.//picsum.photos/100/100" class="col-md-4 mb-3 ms-md-3 rounded float-sm-start" alt="..:"> <p> <.--have to figure out how to wrap this--> Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio </p> </div> </div> <div class="col-md-4"> <.--Space Holder--> </div> </section> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
使用Bootstrap 4在圖像周圍環繞文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.