Обтекание текста вокруг изображения с помощью Bootstrap 4 - PullRequest
Новая
       8

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

0 голосов
/ 25 апреля 2019

Что касается Bootstrap 4:

Рассмотрим следующий HTML / CSS-код, который в настоящее время не отвечает (в настоящее время Bootstrap "col-" отсутствует. Слово Lorem Ipsum оборачивает изображение с правой стороны, а также под изображением в результате float-left. 

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

Спасибо.

Ответы [ 4 ]

0 голосов
/ 25 апреля 2019

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

0 голосов
/ 25 апреля 2019

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

img {
  float: left;
}

@media only screen and (max-width: 540px) {
  img {
    float: none
  }
}
0 голосов
/ 25 апреля 2019

Используйте это. Это обернет изображение словом в точке прерывания "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>
0 голосов
/ 25 апреля 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...