css 在bootstrap中将一个段落环绕在图像周围

fivyi3re 于 2023-05-30 发布在 Bootstrap

关注(0)|答案(1)|浏览(142)

我希望段落去周围的图像和 Package 它，所以我不浪费空间，在下面的图像链接中的此代码的结果：这是我的代码：

<div class="container">
  <div class="row">
    <div class="col-6">
      <h1 class="display-4">Lorem ipsum</h1>
      <p class="lead">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <a href="#" class="btn btn-outline-dark rounded-pill">התחל לכתוב</a>
    </div>
    <div class="col-6">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.YrOgCeeTMGooIg3gpMz8qgHaHa%26pid%3DApi&f=1&ipt=8172a3c985e7c4343b252d0ccaa06f7c36f146a5f6ce4f20fc7c801bf5ce2974&ipo=images" alt="Round Image" class="rounded-circle">
    </div>
  </div>
</div>

我试着把图片放在段落下面，但不起作用。

css

来源：https://stackoverflow.com/questions/76347863/wrap-a-paragraph-around-an-image-in-bootstrap

1条答案

按热度按时间

zu0ti5jz1#

引导5类.float-start用于float: left和.float-end用于float: right。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">

<main class="fluid-container p-3">
  <header class="row">
    <h1 class="col p-2"><a href="https://getbootstrap.com/docs/5.0/utilities/float/">Bootstrap 5 - Float</a></h1>
  </header>
  <section class="row">
    <article class="col p-2">
      <h2>"<code>.float-start</code>"</h2>
      <figure class="figure float-start col-4 p-2 pb-0 mb-0">
        <img src="https://i.ibb.co/0m6612N/static.gif" class="figure-img img-fluid rounded" alt="Animated static">
        <figcaption class="figure-caption text-center">To <code>float: left</code> assign element "<code>.float-start</code>" class</figcaption>
      </figure>
      <p class="p-2">Endeavor soon recurred started lasting collecting wrote breeding absolute. Hastily placing county beauty innate placing demands eldest. Secure be manner lived even therefore death principle none behaved feebly giving off. Words passage education
        disposing understood concern improving impossible stairs rent father wandered rendered country service. Visitor sincerity explained post. </p>
    </article>
  </section>
  <section class="row">
    <article class="col p-2">
      <h2>"<code>.float-end</code>"</h2>
      <figure class="figure float-end col-4 p-2 pb-0 mb-0">
        <img src="https://i.ibb.co/0m6612N/static.gif" class="figure-img img-fluid rounded" alt="Animated static">
        <figcaption class="figure-caption text-center">To <code>float: right</code> assign element "<code>.float-end</code>" class</figcaption>
      </figure>
      <p class="p-2">Endeavor soon recurred started lasting collecting wrote breeding absolute. Hastily placing county beauty innate placing demands eldest. Secure be manner lived even therefore death principle none behaved feebly giving off. Words passage education
        disposing understood concern improving impossible stairs rent father wandered rendered country service. Visitor sincerity explained post. </p>
    </article>
  </section>
</main>

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

我来回答

css 在bootstrap中将一个段落环绕在图像周围

1条答案

相关问题

热门标签

最新问答