Bootstrap: обертывание текст

У меня есть следующий код начальной загрузки:Bootstrap: обертывание текст

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-2 col-md-2 col-sm-2"> 
     <div style="width: 75px; background-color: #ccc"> 
     <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
     </div> 
    </div> 
    <div class="col-xs-10 col-md-10 col-sm-10" style=""> 
     Right content 
    </div> 
    </div> 
</div>

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

У меня есть fiddle here, чтобы вы могли видеть, о чем я говорю. Если вы откроете скрипку и немного измените размер браузера, вы увидите, что на изображении будет наложен правильный текст. Как я могу это предотвратить?

источник

2016-10-26 Icemanind

Вы дали Col-хз-2 для изображения holder.The ширины так 25% или less.So на небольших экранах изображения переполнит контейнер – XYZ

Лично я бы просто дать контейнер изображение и описание контейнера класс '.col-xs-12', чтобы они оба занимали всю строку. – Jhecht

@Jhecht - Это сделает текст под изображением. Я хочу, чтобы изображение оставалось постоянным 75 пикселей, но правильный контент уменьшался и обертывался внутри его ячейки. – Icemanind

Это из-за установленной ширины. Попробуйте это.

JSFiddle

HTML

<div class="container-fluid"> 
     <div class="row"> 
     <div class="col-xs-2 col-md-2 col-sm-2"> 
      <div style="background-color: #ccc"> 
      <img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
      </div> 
     </div> 
     <div class="col-xs-10 col-md-10 col-sm-10" style=""> 
      Right content 
     </div> 
     </div> 
    </div>

CSS

.test-image{ 
    width:100%; 
    height:auto; 
    min-width:25px; 
}

источник

2016-10-26 03:46:03

Проблема заключается в том, что изображение уменьшается и при изменении размера браузера. Я хочу сохранить изображение с постоянными 75 пикселями. – Icemanind

Попробуйте дать img-отзывчивый класс для изображения. –

Или с запросом на медиа, установите ширину изображения до 75 пикселей и покажите его как элемент блока. –

Это Becaue от ширины col-xs-2.You может Ставить that.Or попробовать альтернативу решение, подобное этому

<div class="container-fluid"> 
    <div class="row"> 
<div class="col-xs-12"> 
    <div style="width: 75px; background-color: #ccc;display:table-cell;"> 
     <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
    </div> 
    <div class=" " style="display:table-cell;vertical-align:middle;"> 
     Right content 
    </div> 
</div></div></div>

Или с помощью CSS flexboxes как

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12" style="display:flex"> 
    <div style="width: 75px; background-color: #ccc;flex:1;"> 
     <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
    </div> 
    <div class=" " style="flex:1;vertical-align:middle;"> 
     Right content 
    </div></div></div></div>

источник

2016-10-26 03:53:37 XYZ

Он обтекает текст под изображением. Я бы предпочел, чтобы текст оставался положительным – Icemanind

http://jsfiddle.net/7dx9hbk0/3/ проверить это. Или вы можете использовать гибкую коробку для достижения этого эффекта. Http: //jsfiddle.net/h9pzL33k/1/ Проверить это – XYZ

Самый простой способ я знаю, чтобы применить прямую ширину элемента. Теоретически вы можете изменить загрузку 3 SCSS или LESS (в зависимости от того, что вы используете) и добавить специальный класс столбцов, но это самый прямой метод.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div style="width:75px" class="col-xs-2"> 
 
     <div style="width: 75px; background-color: #ccc"> 
 
     <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-10 col-md-10 col-sm-10" style=""> 
 
     Right content 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-10-26 03:55:09 Jhecht

Попробуйте это.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-3 col-md-2 col-sm-2"> 
     <div style="width: 75px; background-color: #ccc"> 
     <img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
     </div> 
    </div> 
    <div class="col-xs-9 col-md-10 col-sm-10" style=""> 
     Right content 
    </div> 
    </div> 
</div>

источник

2016-10-26 03:55:14

Тот же выпуск при изменении размера. – Icemanind

Я недавно нашел ваш измененный вопрос. Я отвечу –

, почему вы установили свою ширину в дочернем div div.col-xs-2? –

Bootstrap: обертывание текст

ответ

Смежные вопросы