Обтекание текстом картинки bootstrap: responsive — Обтекание текстом адаптивной картинки Bootstrap – Bootstrap обтекание текста — Stack Overflow на русском — Вебджем.рф

Содержание

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

Вопрос:

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

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

<img 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 src="~/Images/some_image.png" />
<img src="~/Images/some_image.png" />

.float-left изначально скрывается в xs с помощью .d-none затем отображается из md вверх с помощью .d-md-block, в то время как

.col-12 скрывается для md с использованием .d-md-none

Ответ №1

Ответ №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 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>

Текст. Утилиты · Bootstrap. Версия v4.2.1

Документация и примеры для обычных текстовых утилит для управления выравниванием, обертыванием, весом и тому подобное.

Выравнивание текста

Выравнивайте текст в соответствии с обновляющимся выравниванием компонентов с помощью классов выравнивания.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Выровненный слева текст для всех размеров видовых экранов.

Выровненный по центру текст для всех размеров видовых экранов.

Выровненный справа текст во всех размерах видового экрана.

Выровненный слева текст для экрана размера SM (small) или более широкого.

Выровненный слева текст для экрана размера MD (medium) или более широкого.

Выровненный слева текст для экрана размера LG (large) или более широкого.

Выровненный слева текст для экрана размера XL (extra-large) или более широкого.

<p>Выровненный слева текст для всех размеров видовых экранов.</p>
<p>Выровненный по центру текст для всех размеров видовых экранов.</p>
<p>Выровненный справа текст во всех размерах видового экрана.</p>

<p>Выровненный слева текст для экрана размера SM (small) или более широкого.</p>
<p>Выровненный слева текст для экрана размера MD (medium) или более широкого.</p>
<p>Выровненный слева текст для экрана размера LG (large) или более широкого.</p>
<p>Выровненный слева текст для экрана размера XL (extra-large) или более широкого.</p>

Обертка текста и оверфлоу

Обтекание текста классом .text-wrap.

<div>
  This text should wrap.
</div>

Предотвращайте оборачивание текста с помощью класса .text-nowrap.

Этот текст должен выходить за текст родительского элемента.

<div>
  Этот текст должен выходить за текст родительского элемента.
</div>

Для более длинного контента вы можете добавить класс .text-truncate для усечения текста используя эллипсис, т.е. многоточие («…»). Требует display: inline-block или display: block.

Praeterea iter est quasdam res quas ex communi.


 <!-- Block level -->
<div>
  <div>
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span>
  Praeterea iter est quasdam res quas ex communi.
</span>

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Текст в нижнем регистре.

Текст в верхнем регистре.

разноРеГиСТровый текст.

<p>Текст в нижнем регистре.</p>
<p>Текст в верхнем регистре.</p>
<p>разноРеГиСТровый текст.</p>

Заметьте, что text-capitalize меняет лишь первую букву каждого слова, оставляя регистр других неизменным.

Жирность текста и курсив

Изменяйте толщину и курсивность текста.

Жирный текст.

Нормальный текст.

Легкий текст.

Курсивный текст.

<p>Жирный текст.</p>
<p>Нормальный текст.</p>
<p>Легкий текст.</p>
<p>Курсивный текст.</p>

Моноширинный текст (ширина каждого символа одинакова)

Измените выделение на наш моноширинный стек с помощью .text-monospace.

Это моноширинный текст

<p>Это моноширинный текст</p>

Сброс цветов

Сбросьте цвет текста или ссылки с помощью .text-reset для наследования цвета от своего родителя. Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

<p>
  Muted text with a <a href="#">reset link</a>.
</p>

Текстовое оформление

Удалите текстовое оформление с помощью класса

.text-decoration-none.

<a href="#">Non-underlined link</a>

Bootstrap 4 обтекание текста вокруг другого столбца / изображения

Привет, у меня проблема с тем, что мой текст не оборачивается вокруг моих изображений с помощью начальной загрузки 4. Вместо того, чтобы оборачиваться вокруг, он остается справа, может быть, я не должен был помещать изображения в отдельные столбцы?

Эти два изображения должны быть на вершине друг друга, но мне нужно, чтобы текст располагался справа от него, и когда экран становится меньше, а высота текста больше высоты двух изображений, нужно обернуть их вокруг.

Также, как я могу сделать так, чтобы изображения НЕ менялись при изменении размера браузера, чтобы они всегда оставались одинакового размера.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<section>
    <div>
        <div>

            <div>
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
            </div>

            <div>
                <div>
                    <div>
                        <h2>About</h2>
                    </div>
                    <div>
                        <div>
                            <div>
                                <img src="http://via.placeholder.com/350x150" alt="">
                            </div>
                            <div>
                                <img src="http://via.placeholder.com/350x150" alt="">
                            </div>
                        </div>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Illo suscipit facilis ipsum ullam reiciendis odio error
                            iste neque ratione libero rem accusamus voluptatibus, nihil
                            unde maiores sunt nisi. Assumenda, consectetur.
                        </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Illo suscipit facilis ipsum ullam reiciendis odio error
                            iste neque ratione libero rem accusamus voluptatibus, nihil
                            unde maiores sunt nisi. Assumenda, consectetur.
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

Бутстрап 4 обтекание текста вокруг другого столбца/изображений

3 Joost Hansworst [2018-02-09 15:02:00]

Привет. У меня проблема с тем, что мой текст не обертывает мои изображения с помощью загрузочного файла 4. Вместо того, чтобы обертывать его, он остается справа, возможно, я не должен помещать изображения в отдельные столбцы?

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

Также как я могу сделать это так, чтобы изображения DONT изменялись при изменении размера браузера, чтобы они всегда оставались одного и того же размера.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<section>
    <div>
        <div>

            <div>
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil
                    unde maiores sunt nisi. Assumenda, consectetur.
                </p>
            </div>

            <div>
                <div>
                    <div>
                        <h2>About</h2>
                    </div>
                    <div>
                        <div>
                            <div>
                                <img src="http://via.placeholder.com/350x150" alt="">
                            </div>
                            <div>
                                <img src="http://via.placeholder.com/350x150" alt="">
                            </div>
                        </div>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Illo suscipit facilis ipsum ullam reiciendis odio error
                            iste neque ratione libero rem accusamus voluptatibus, nihil
                            unde maiores sunt nisi. Assumenda, consectetur.
                        </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Illo suscipit facilis ipsum ullam reiciendis odio error
                            iste neque ratione libero rem accusamus voluptatibus, nihil
                            unde maiores sunt nisi. Assumenda, consectetur.
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

html5 image css3 wrapping bootstrap-4

как разместить надпись поверх картинки? — Хабр Q&A

Есть html-страничка.
Лежит здесь (СОРРИ, ИЗНАЧАЛЬНО ССЫЛКА БЫЛА БИТОЙ, теперь все ОК):
https://dl.dropboxusercontent.com/u/28959587/pract…
К ней подключены:
*Bootstrap (нужен для адаптивной верстки)
getbootstrap.com
*Flowtype (js плагин, для адаптивного шрифта)
simplefocus.com/flowtype
*Fit.js (js плагин, для центрирования элементов)
soulwire.github.io/fit.js
Проблема:
Не работает плагин Fit.js (скорее всего я его неверно подключил).
Мне нужно, чтобы надпись «Practicana» располагалась по центру первой картинки, как вертикально, так и горизонтально. Только текст, без желтого фона.
Так же, как сделано на этой картинке:
https://dl.dropboxusercontent.com/u/28959587/shot.png
Для этого я пытаюсь разместить блок div (который с надписью Practicana) внутри блока div (который заполнен картинкой).
Использую вот такой код:
<div> <img src="http://practicana.com/img/background-02.jpg"> <div> <h6>Practicana</h6> </div> </div>
В данном случае, надпись располагается после картинки.
Чувствую себя идиотом — что-то банальное не учел.
Почему не использую свойство background:
Оно не вписывает картинку в ширину окна, а просто отображает ее в масштабе 1:1 в области div.
Это мне не подходит.
Почему не сделаю картинку с надписью в фотошопе:
Эта надпись должна легко меняться, к тому же под надписью впоследствии будет размещен другой контент (поэтому мне важно наложить друг на друга именно блоки div).
Подскажите, как добиться эффекта наложения текста на картинку с помощью плагина Fit.js?
UPD
Подсказали этот вариант:
jsbin.com/fudusimi/1
Но там одно маленькое НО:
Высота картинки фиксированная. А мне нужно, чтобы была плавающей. При сужении окна браузера ширина картинки все также заполняет его на 100%, а высота уменьшается пропорционально.
Есть еще какие-либо соображения?
html — Bootstrap3 — Обтекание текстом на выровненных справа изображениях
I have solved with with bootstrap 3, it now behaves correctly:
https://jsfiddle.net/cec9086a/
<div> <div> <div> <h3> My Title </h3> </div> <div> <div> <img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png"/> </div> <div> <img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg"/> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. </p> </div> </div> </div>
[CSS] Правильный способ обтекания текста под изображением в Bootstrap 4?
Используя Bootstrap 4 alpha 6, я хочу показать отзыв, содержащий:
Слева: фото человека
Справа: цитата, название и логотип компании (по левому краю)
То есть у планшета и ширины рабочего стола. Но когда ширина окна уменьшается, я хочу разместить набор так, чтобы изображение находилось поверх набора текста, и каждая часть выравнивалась по центру.
В настоящее время это мой код …
 <div> <div> <div> <img src="http://placehold.it/150x150" alt="Generic placeholder image"> <div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#">link</i></a></p> <h3>Joe Smith</h3> <img src="http://placehold.it/150x40"> </div> </div> </div> </div>
Это успешно приводит к следующему результату при ширине рабочего стола …
Однако, когда сокращается, договоренность выглядит следующим образом …
Вместо этого я хотел бы, чтобы изображение было сверху, а не было обернуто, и желательно было бы отцентрировано. Текст ниже должен быть по центру.
Этот код является медиа-объектом.
Я также попытался использовать два столбца для достижения этой цели — один из ширины 2, другой из 10 …
 <div> <div> <div> <div> <img src="http://placehold.it/150x150" alt="Generic placeholder image"> </div> <div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i>link</i></a></p> <h3>Joe Smith</h3> <img src="http://placehold.it/150x40"> </div> </div> </div> </div>
… Это успешно дает правильный результат на мобильной ширине …
… Тем не менее, а) я не уверен, является ли эта разметка правильной, и б) это означает, что текст центрируется даже на ширине рабочего стола, что неуместно …
Меня смущает правильный подход: нужно ли мне использовать img-Fluid вместо изображения с фиксированной шириной и т. Д. Можно ли выровнять текст по-разному в зависимости от ширины / точки останова браузера?
Вещи d-flex / mr-auto, я не предан. Это было скопировано из кода документации Bootstrap 4 для медиа-объекта.
Какой путь?

Обтекание текстом картинки bootstrap: responsive — Обтекание текстом адаптивной картинки Bootstrap – Bootstrap обтекание текста — Stack Overflow на русском