Создание реагирующей строки

Question

Я пытаюсь создать отзывчивую строку, которая при отображении на iPad 3 изображения проходит через экран, как на рабочем столе. В настоящее время они ведут себя так же, как и мобильные, и расширяются вертикально, а не горизонтально.

Изображения изображения диапазон 3 продукта на сайте: http://dekatest.neto.com.au/

<div class="container" style="text-align:center;"> 
 
<div class="row"><img alt="" src="/assets/images/MEDICAL-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/SPROTS-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/WELLBEING-RANGE.jpg" style="max-width:100%;" /></div> 
 
</div>

Answer 1

Если вы используете Bootstrap попробовать что-то вроде этого

<div class="container text-center"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <img alt="" src="/assets/images/MEDICAL-RANGE.jpg" /> 
     </div> 
     <div class="col-sm-4"> 
     <img alt="" src="/assets/images/SPROTS-RANGE.jpg" /> 
     </div> 
     <div class="col-sm-4"> 
     <img alt="" src="/assets/images/WELLBEING-RANGE.jpg" /> 
     </div> 
    </div> 
</div 

и с CSS оных свойства и стили к вашим тегам

img { max-width: 100%; } 

Примечание: вы должны изменить значение col-sm-* в зависимости от того, что вы пытаетесь сделать.

Answer 2

, если вы используете только строку только из-за этого вам не требуется прокладка между изображениями. Настолько просто, что сделать отдельный класс для управления заполнением col-sm. Вы должны использовать col-* внутри row, тогда это будет хорошо работать.

CSS

.no-p{ 
    padding-left:0px; 
    paddding-right:0px; 
    } 

HTML

<div class="container text-center"> 
     <div class="row"> 
      <div class="col-xs-4 no-p"> 
      <img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" /> 
      </div> 
      <div class="col-xs-4 no-p"> 
      <img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" /> 
      </div> 
      <div class="col-xs-4 no-p"> 
      <img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" /> 
      </div> 
     </div> 
    </div> 

Посмотреть на JsFiddle: https://jsfiddle.net/L2y3ybff/