Bootstrap 4 网格系统 - 使用列有没有办法在图像周围环绕文本？答案

【问题标题】：Bootstrap 4 grid system - using columns is there any way to wrap text around an image?Bootstrap 4 网格系统 - 使用列有没有办法在图像周围环绕文本？
【发布时间】：2019-01-09 16:29:23
【问题描述】：

我整天都在寻找答案，但还没有找到答案。使用 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>

【问题讨论】：

设置图片宽度为100%
为了进一步澄清，在 Bootstrap 中，我需要找到一个类，它允许列出的 div 类作为高达 995px 的“行”，然后更改为“列”。
感谢@Anjali，但这也不起作用。我过去曾尝试过。这与我认为我布置行和列的方式有关。最后一行需要以某种方式成为 med 屏幕的 flex-row 以允许换行，但不确定这实际上是如何工作的。
可以参考this重写
@Felicia 您可以手动设置行宽并设置其背景

标签： css flexbox grid bootstrap-4 word-wrap

【解决方案1】：

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

【讨论】：

感谢您的建议和尝试，但它并不能满足我们的要求。 Img 必须保持在所有内容的左侧，直到它位于所有内容之上的小屏幕尺寸。评分和总房间信息必须保持在图像的右侧。我认为我的问题与结合 Flex 和 Grid 以及正确嵌套有关，但我无法弄清楚。

【解决方案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>

【讨论】：