使用 Bootstrap 4 在图像周围环绕文本答案

【问题标题】：Wrapping Text Around Image Using Bootstrap 4使用 Bootstrap 4 在图像周围环绕文本
【发布时间】：2019-09-14 11:10:19
【问题描述】：

关于 Bootstrap 4：

考虑以下当前没有响应的 HTML/CSS 代码（当前没有引导程序“col-”。Lorem Ipsum 字将图像包裹在右侧以及图像下方，因为向左浮动。

<img class="pr-3 pb-3 float-left" src="~/Images/some_image.png" />
        
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque nisl arcu, tempor a purus quis, congue rutrum libero. 
Suspendisse potenti. 
Aliquam nibh massa, tristique quis sodales at, fermentum at ex. 
Integer nec elementum nibh. 
Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. 
In euismod enim mi ut purus. Morbi ac quam lectus. 
</p>
<p>
Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. 
In pellentesque dui turpis ut quam. 
Praesent ullamcorper eros at lectus elementum tempus. 
Donec fermentum velit nec fermentum bibendum. 
In sit amet aliquam nulla, at vestibulum ligula. 
Interdum et malesuada fames ac ante ipsum primis in faucibus. 
Nam lacus purus, interdum nec blandit vel, lacinia ac ex.
</p>

我不确定使用什么 Bootstrap 语法在“md”断点处保持自动换行，然后在“sm”断点处转到图像上的“col-12”，然后文本上的“col-12”，将文本放在图像下方，而不是当前自动换行。

谢谢。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

BS4 具有响应式浮动。因此，如果您在图像上设置float-left-md，它应该会有所帮助。 https://getbootstrap.com/docs/4.0/utilities/float/#responsive

例子：

<img class="pr-md-3 pb-3 float-md-left img-fluid" src="https://via.placeholder.com/150" />

https://codepen.io/crishpeen/pen/PgxELO

【讨论】：

我改写了这个问题......我认为我的措辞不清楚。使用 Bootstrap 4 我想在“md”断点处对图像进行自动换行，在“sm”断点处我想在两者上都使用“col-12”以将文本放在图片下方...

【解决方案2】：

您也可以使用css 实现此目的。从img 类中的html 中删除float-left，然后将其添加到您的css：

img {
  float: left;
}

@media only screen and (max-width: 540px) {
  img {
    float: none
  }
}

【讨论】：

【解决方案3】：

使用它会在“md”断点和“sm”断点处自动换行图像。它会将文本放在图像下方。

<html> 
<head>
  <title>Wrapping Text Around Image</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
  <style type="text/css">
    .pb-3 {
        padding-bottom: 0 !important;
    }
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) { 
      .float-md-left {
          float: none !important;
      }
    }
    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) { 
      .float-md-left {
          float: none !important;
      }
    }
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) { 
      .float-md-left {
          float: left !important;
      }
    }
    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      .float-md-left {
          float: left !important;
      }
    }
  </style>
</head>
<body>
    <img class="pr-3 pb-3 float-md-left" src="https://via.placeholder.com/140x100" />
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Quisque nisl arcu, tempor a purus quis, congue rutrum libero. 
    Suspendisse potenti. 
    Aliquam nibh massa, tristique quis sodales at, fermentum at ex. 
    Integer nec elementum nibh. 
    Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. 
    In euismod enim mi ut purus. Morbi ac quam lectus. 
    </p>
    <p>
    Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. 
    In pellentesque dui turpis ut quam. 
    Praesent ullamcorper eros at lectus elementum tempus. 
    Donec fermentum velit nec fermentum bibendum. 
    In sit amet aliquam nulla, at vestibulum ligula. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam lacus purus, interdum nec blandit vel, lacinia ac ex.
    </p>
</body>
</html>

【讨论】：

【解决方案4】：

我认为响应式地将元素从 float 转换为 col 是不可能的。但是您可以响应地显示和隐藏每个

<img class="pr-3 pb-3 float-left d-none d-md-block" src="~/Images/some_image.png" />
<img class="pb-3 col-12 d-md-none" src="~/Images/some_image.png" />

.float-left 最初在 xs 处隐藏，.d-none 然后从 md 向上显示 .d-md-block，而 .col-12 在 md 向上隐藏 .d-md-none

【讨论】：