在引导列中的图像中环绕文本
[英]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.