Question

我整天都在寻找答案，但还没有找到答案。使用Bootstrap 4，如何使用d-flex或flex-wrap在带有列和行的网格布局中将文本环绕图像。我提供了我的代码和两个图像示例。我希望这是可能的。我已经看过这个示例-https://www.codeply.com/api/run，但是图像却是固定大小的，但它有很大的不同，但是我们需要图像具有响应能力。预先加油，谢谢。

Example image here with photo

Example diagram here

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container" style="margin-top: 30px;">


  <div class="row" style="border: 1px solid #ddd;">
    <div class="col-sm-6 col-lg-6 col-xl-5">
      <div class="imagebox">
        <figure>
          <img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
          <figcaption class="imagebox-desc">VERANDAHS<br>
            <span class="small">Superior Central Location...</span></figcaption>
        </figure>
      </div>
    </div>
    <div class="col-sm-6 col-lg-6 col-xl-7">
      <div class="row">
        <div class="col-12"><small>BPP Rating - 88%</small></div>
        <!-- this below line will wrap on all screens -->
        <div class="col-6"><small>Online Rating - 88%	</small></div>
        <div class="col-6 text-right"><small>Total Beds - 50</small></div>
      </div>
      <hr style="margin: 0.5rem 0;">
      <div class="row">
        <div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
        <div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
      </div>
      <div class="row">
        <div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
          instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
      </div>
    </div>
  </div>

Answer 1

您可以通过在行及其属性上将background-image设置为div的一个中心来进行尝试这是一个示例-https://jsfiddle.net/erymag7b/27/

Answer 2

您可以在 .imagebox 中使用float:left将文本环绕在图像周围，并在 P标签中使用clean:both将文本保留在图像下方

https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100

提示：Avoid Inline Styles for CSS Design

.imagebox {
  float: left;
  margin-right: 1em;
}

div.container {
  max-width: 100%;
}

figcaption.imagebox-desc {
  top: 0;
  position: absolute;
  left: 0;
  color: white;
  background: rgba(4, 4, 4, 0.8);
  width: 100%;
  padding: 0.7rem 0 0.5rem 1.2rem;
  font-size: 1.2rem;
}

.imagebox-inner {
  position: relative;
  display: inline-block;
}

.img {
  width: 100%;
}

@media (max-width: 768px) {
  .text {
    clear: both;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="imagebox">
        <figure class="imagebox-inner">
          <img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
          <figcaption class="imagebox-desc">VERANDAHS<br>
            <span class="small">Superior Central Location...</span></figcaption>
        </figure>
      </div>
      <div><small>BPP Rating - 88%</small></div>
      <div class="d-flex justify-content-between"> <small>Online Rating - 88%   </small> <small>Total Beds - 50</small></div>
      <hr class="m3">
      <div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
      <div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
      <p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
        ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
        sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
    </div>

  </div>
</div>

Bootstrap 4网格系统-使用列有什么方法可以在图像周围包裹文本？

2 个答案: