css 如何在Bootstrap 5中将文本环绕图像

ifsvaxew 于 2023-05-30 发布在 Bootstrap

关注(0)|答案(2)|浏览(174)

我想让我的文字环绕在我的图像周围。现在我使用的是Bootstrap 5网格系统。但这不是我想要的结果。我试过使用'float：就在图像上但没有用
文本应该真正环绕被拉到右边的图像。
你将如何实现这一点？
我的代码：

<section id="about" class="about">
      <div class="container">

        <div class="row">
          <div class="col-lg-7 pt-4 pt-lg-0">
            <h3>Over mij</h3>
            <br />
            <p>
              ... text ...
            </p>
          </div>
        
          <div style="text-align: left;" class="col-lg-5">
            <img src="assets/img/fotokristin.jpg" class="img-fluid imgshadow" alt="">
          </div>

        </div>

      </div>
    </section>
    <!-- End About Section -->

css

来源：https://stackoverflow.com/questions/69190070/how-to-wrap-text-around-image-in-bootstrap-5

2条答案

按热度按时间

zazmityj1#

图像需要与文本在相同的.col中，在<p>之前并使用.float-end

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<section id="about" class="about">
  <div class="container">

    <div class="row">
      <div class="col-lg-7 pt-4 pt-lg-0">
        <h3>Over mij</h3>
        <br />
        <img src="https://via.placeholder.com/100" class="float-end imgshadow" alt="">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div style="text-align: left;" class="col-lg-5">

      </div>

    </div>

  </div>
</section>

赞(0）回复(0）举报 2023-05-30

6jjcrrmo2#

尝试float-end或其任何变体：https://getbootstrap.com/docs/5.1/utilities/float/记住避免使用d-flex或d-grid，它们会给予你比BS默认值更意外的结果。
记得给你的图像添加额外的选项，使它看起来更好，比如m-3用于所有边的边距。您也可以使用<figure>。
示例代码：

<p>Text.</p>

<figure class="figure w-50 float-end m-3">
    <img src="photo.jpg" class="figure-img img-fluid rounded img-thumbnail" alt="Alt text.">
    <figcaption class="figure-caption text-center">Visible text.</figcaption>
</figure>

<p>Text.</p>

结果：

以防万一，我的图像包含在这里（这些只是开始标记，所以你可以看到相关的类）：

<main class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何在Bootstrap 5中将文本环绕图像

2条答案

相关问题

热门标签

最新问答