在 Bootstrap 列内环绕图像中的文本

Question

刚接触编码，希望对有关 bootstrap 的布局问题有所帮助。

我在试图利用 bootstrap 中的网格系统创建的列中有一个图像和一个段落元素。我希望图像向左浮动，然后让文本位于图像的右侧并继续环绕底部以填充列的宽度。

我希望它看起来像的例子可以在这里看到： Layout Goal

不过我目前的情况是文字只会位于图片下方：Layout Current

我在主容器中创建了一行，并在该行中创建了两列。一个被赋予 md-8 宽度（并保存我的图像和段落元素），另一个被赋予 md-4 宽度并且只是一个 space 持有者，因为我必须使我的内容成为容器宽度的 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>

我正在使用 float-left class bootstrap 推荐，并且还推荐在我阅读本文时将图像和段落元素包含在同一列中。关于更好的方法或我做错了什么的任何想法？谢谢！

Answer 1

我正在为 Bootstrap 4 和 Bootstrap 5 提供解决方案。有关更多详细信息，我建议您查看有关 clearfix 和 w-100 的文档来自Bootstrap 的网站。

这是Bootstrap4 求解：

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

这是Bootstrap5 求解：

<!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 列内环绕图像中的文本

Wrapping Text Around in Image Within A Bootstrap Column

html

css

layout

bootstrap-4