Вопрос:
Что касается Bootstrap 4:
Рассмотрим следующий код HTML/CSS, который в настоящее время не отвечает (в настоящее время Bootstrap “col-” отсутствует. Слово Lorem Ipsum оборачивает изображение с правой стороны, а также под изображением, в результате операции float- оставил.
<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” в тексте., поместив текст под изображением, выровняем текущее перенос слов.
Благодарю.
Лучший ответ:
Я не думаю, что возможно перевести элемент из 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
Ответ №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″ />
Ответ №2
Вы также можете достичь этого с помощью css. Удалите float-left из html в вашем классе img а затем добавьте это в ваш 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/140×100″ /> <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>
