Обтекание картинки текстом bootstrap: Bootstrap обтекание текста — Stack Overflow на русском

Leave a Comment / Разное / By /

Bootstrap обтекание текста — Stack Overflow на русском

Вопрос задан

Изменён 7 лет 2 месяца назад

Просмотрен 11k раза

Добрый вечер! Не могу сделать обтекание текста нормально.

Вот что сейчас имею. То есть col-lg-5 картинка на половину блока.

col-lg-7 — текст справа от картинки

col-lg-12 — текст во всю ширину контейнера

Мне нужно как-то избавиться от col-lg-12, чтобы текст в одну колонку писать и он под изображением уже шел во всю длину.

        <div>
        <div></div>
        <div>
            <div>
                <div>
                </div>
                <div>
                    <div>
                        13.
 
 04.2015
                    </div>
                </div>
                <div>
                    <img src="img/test.jpg">
                </div>
            </div>
            <div>
                <div>
                    <h2>Заголовок</h2>
                    <div></div>
                    <h3>Заголовок 2</h3>
                    <div></div>
                    <p>
                        Длинный текст
                    </p>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                <p>
                    Длинный текст
                </p>
                </div>
            </div>
        </div>
    </div>
  • bootstrap

4

Не совсем понял суть вопроса. .Вам нужно, что бы текст после обтекания картинки был во всю ширину? Так просто не задавайте ему колонку, но оставьте в .row.

<div>
    <div>
        <img src="">
    <div/>
    <div>
        Длинный текст
    </div>
</div>

Решил вопрос, решение не идеальное, т.е. приходится игнорировать основные элементы верстки на Bootstrap. Но все же это выход.

http://dabblet.com/gist/7766924

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

responsive — Обтекание текстом адаптивной картинки Bootstrap

Подскажите, как сделать обтекание картинки текстом используя сетку бутстрап? Для картинки использую класс img-responsive.

  • bootstrap
  • responsive

6

Класс img-responsive задаёт:

display: block;
max-width: 100%;
height: auto;

А класс pull-right перебивает значение для float:

float: right !important;

Чтобы картинка меняла размеры, зададим ей ширину через проценты. И настроим, чтобы на узком экране картинка занимала всю ширину колонки. Проверьте, что получилось:

.width-40-pct {
  width: 100%;
}

@media (min-width: 768px) {
  .width-40-pct {
    max-width: 40%;
    width: 40%;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div>
  <div>
    <div>
      <img src="http://placehold.
 
 it/600x200" alt="" />

      <div>
        Картинка прижмется к правому краю, когда экран станет шире 767 пикселей.
      </div>
      
      <p>   слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      </p>
    </div>
    <div>
      новости новости новости новости новости новости новости новости новости
      новости новости новости новости новости новости новости новости новости
      новости новости новости новости новости новости новости новости новости
      новости новости новости новости новости новости новости новости новости
    </div>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как оборачивать текст вокруг изображения в Bootstrap 5

спросил

Изменено 6 месяцев назад

Просмотрено 4к раз

Я хочу, чтобы мой текст обтекал мое изображение.

Сейчас я использую сетку Bootstrap 5. Но это не дает мне желаемого результата. Я пробовал использовать «float: right» на изображении, но это не сработало.

Текст действительно должен обтекать изображение, сдвинутое вправо.

Как бы вы этого добились?

Мой код:

 <раздел>
      <дел>
        <дел>
          <дел>
             
Более мидж
 
            

            

              ... текст ...
<дел>