在引导列中的图像中环绕文本
[英]Wrapping Text Around in Image Within A Bootstrap Column
问题描述
Very new to coding and was hoping for some help with a layout question regarding bootstrap.
对编码非常陌生，希望对有关引导程序的布局问题有所帮助。
I have an image and a paragraph element both within a column I created based on trying to utilize the grid system in bootstrap.我在尝试利用引导程序中的网格系统创建的列中都有一个图像和一个段落元素。 I would like the image to float left, and have the text then sit to the right side of the image and proceed to wrap around the bottom to fill the width of the column.我希望图像向左浮动，然后让文本坐在图像的右侧并继续环绕底部以填充列的宽度。
The example of what I would like it to look like can be seen here: Layout Goal我希望它看起来像的例子可以在这里看到：布局目标
The my current situation is however that the text will only sit below the image: Layout Current然而，我目前的情况是文本只会位于图像下方：布局当前
I have created a row within the main container, and within that row two columns.我在主容器中创建了一行，并在该行中创建了两列。 One is given an md-8 width (and holds my image and paragraph element) and another is given an md-4 width and is just a space holder, as I have to make my content 2/3 the container width.一个被赋予 md-8 宽度（并保存我的图像和段落元素），另一个被赋予 md-4 宽度并且只是一个空间持有者，因为我必须使我的内容成为容器宽度的 2/3。
The code I used Is here:我使用的代码在这里：
<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>
I am using the float-left class bootstrap recommends, and also including the image and paragraph element in the same column as I read this was recommended.我正在使用推荐的浮动左 class 引导程序，并且还推荐在我读到的同一列中包含图像和段落元素。 Any ideas of a better way to do this or what I am doing wrong?关于更好的方法或我做错了什么的任何想法？ Thanks!谢谢！
1 个解决方案
解决方案1
0 已采纳 2020-12-15 02:08:54
I am providing solutions for both Bootstrap 4 and Bootstrap 5. For more detailed information, I recommend you to review the documents about clearfix and w-100 from Bootstrap's web site.我正在为 Bootstrap 4 和 Bootstrap 5 提供解决方案。有关更多详细信息，我建议您查看 Bootstrap 的 web 站点中有关clearfix和w-100的文档。
This is Bootstrap 4 solve:这是 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>
This is Bootstrap 5 solve:这是 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.