Как сделать изображения отзывчивыми в шаблоне бутстрапа

Question

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

<div class="row"> 
    <div class="col-md-4"> 
    <img src="image.jpg" class="images"> 
    </div> 
    <div class="col-md-4"> 
    <div class="text"> 
     <h2 class="featurette-heading">What's Included with HTML?</h2> 
      <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p> 
    </div> 
</div> 
    <div class="col-md-4"> 
    <img src="image.jpg" alt="Chrome Browser" class="images"></div> 
</div> 

Как сделать изображение размер в зависимости от размера окна так, что изображения и текст все отображаются в одной строке?

Я попробовал width:100%;height auto; и max-width:100%; и всевозможные комбинации, чтобы сделать их отзывчивыми, но пока ничего не работало.

Заранее благодарен!

Answer 1

Вам просто нужно изменить размер столбца с md на xs (col-md-4: col-xs-4).

См. Docs.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" /> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="text"> 
 
     <h2 class="featurette-heading">What's Included with HTML?</h2> 
 

 
     <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы должны добавить .img-responsive класс в изображении. Применимо к изображению max-width: 100%;, height: auto; and display: block; так, чтобы оно красиво окрашивалось в родительский элемент.

Для получения дополнительной информации: http://getbootstrap.com/css/#images

Answer 3

попробуйте заменить .col-xs-12 в DIV изображения

Answer 4

Вы можете использовать класс "Col-см-4 цв-хз-12" на DIV и IMG реагирующих класс на изображениях и атрибут атрибута стиля: встроенный блок на ярлыке img, чтобы поддерживать его в центре.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-xs-12""> 
 
     <img class="img-responsive" style="display:inline-block" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" /> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4"> 
 
     <div class="text"> 
 
     <h2 class="featurette-heading">What's Included with HTML?</h2> 
 

 
     <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-12""> 
 
     <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" style="display:inline-block" /> 
 
    </div> 
 
    </div> 
 
</div>