Question

关于Bootstrap 4：

请考虑以下当前无响应的HTML / CSS代码（当前没有Bootstrap“ 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”，将文字放在图片下方，然后替换当前的自动换行。

谢谢。

Answer 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

Answer 2

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

img {
  float: left;
}

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

Answer 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>

Answer 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最初使用.d-none隐藏在xs处，然后使用.d-md-block从md向上显示，而.col-12隐藏使用.d-md-none进行md向上显示

使用Bootstrap 4将文字环绕图像

4 个答案: