Обтекание изображения текстом с помощью Bootstrap 4

Что касается 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» в тексте, поместив текст под изображением , вместо текущего переноса слов.

Спасибо.

html css bootstrap-4

25.04.2019 07:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

730

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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» для обоих, чтобы поместить текст под изображением...

— 25.04.2019 07:34

25.04.2019 07:14

Вы также можете добиться этого с помощью css. Удалите float-left из html в вашем классе img, а затем добавьте это в свой css:

img {
  float: left;
}

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

25.04.2019 08:02

Используйте это. Он будет переносить изображение по словам в точке останова «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>

25.04.2019 08:05

Ответ принят как подходящий

Я не думаю, что можно быстро перевести элемент из 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

25.04.2019 08:53

Другие вопросы по теме

Изменить порядок столбца в мобильной версии

Использование Nodejs для рендеринга html-css-javascript-изображений

Динамический радиальный индикатор выполнения

Почему мое подменю не отображается под моим элементом навигации?

Как добиться «глубины» с помощью преобразования 3d css

Как иметь заголовок и раздел прокрутки внутри элемента div

Почему мне нужно «объединить» оба объекта, чтобы использовать «display: flex;» CSS?

IPhone Mobile Safari принудительно отображает верхнюю панель после поворота от альбомной ориентации к портретной (избегайте «минимального пользовательского интерфейса»)

Событие включения/выключения на той же кнопке

Небольшая горизонтальная прокрутка в HTML, которая составляет 100% vw

Обтекание изображения текстом с помощью Bootstrap 4

Ответы 4

Другие вопросы по теме

Похожие вопросы