Штабелирование столбцов и изображений в ответном дизайне Bootstrap

Question

Я хочу складывать четыре изображения, которые находятся рядом друг с другом на рабочем столе, быть друг над другом в 2 столбцах (1 и 2
3 и 4) в размере мобильного экрана, используя бутстрап 12 столбцов. Исходные 4 imgs похожи, но не совсем одинаковы по размеру. Высота колеблется от 40 до 57 пикселей, а ширина - от 176 до 220 пикселей. Когда они отображаются не реагирующими, они выходят так, как они должны быть на рабочем столе, рядом друг с другом. Однако, когда я делаю их отзывчивыми, добавляя ширину = 100% в html, последний появляется увеличенным по сравнению с остальными, как на рабочем столе, так и на мобильном уровне, а первый занимает больше места, чем остальные, если я проверю их. Фотографии выводятся в 2 столбцах по размеру мобильного телефона, но последний рисунок не соответствует третьему, но смещен ниже. Если я отрегулирую размер последнего изображения до 85%, тогда размеры будут в порядке, но проблема с отсутствием позиции pic остается.

Вот код:

<section id="section"> 
     <div class = "container"> 
      <div class = "row"> 
       <div class="col-md-3 col-sm-3 col-xs-6 col text-center"> 
       <img src = "img/1.png" style='width:100%;' alt="Null" /> 
       </div> 

       <div class="col-md-3 col-sm-3 col-xs-6 text-center"> 
       <img src = "img/2.png" style='width:100%;' alt="Null" />      
       </div> 

       <div class="col-md-3 col-sm-3 col-xs-6 text-center"> 
       <img src = "img/3.png" style='width:100%;' alt="Null" /> 
       </div> 

       <div class="col-md-3 col-sm-3 col-xs-6 text-center"> 
       <img src = "img/4.png" style='width:100%;' alt="Null" /> 
       </div> 
     </div> 
    </div> 
</section> 

Answer 1

Это зависит от использования float на предметы разной высоты.

У вас есть 2 варианта, один добавив специальный DIV предоставленный Bootstrap, который виден только в мобильных контрольных точек:

  <div class="col-md-3 col-sm-3 col-xs-6 text-center"> 
      <img src = "img/2.png" style='width:100%;' alt="Null" />      
      </div> 


      <div class="clearfix visible-xs"></div> 

      <div class="col-md-3 col-sm-3 col-xs-6 text-center"> 
      <img src = "img/3.png" style='width:100%;' alt="Null" /> 
      </div> 

      <div class="col-md-3 col-sm-3 col-xs-6 text-center"> 
      <img src = "img/4.png" style='width:100%;' alt="Null" /> 
      </div> 
    </div> 
</div> 

Вы должны добавить это после каждых двух элементов.

Другим решения является установкой автоматическим ясны только с помощью CSS (вы должны вручную установить правильное медиа значения запроса) и идея состоит в том, чтобы clear:left каждый третий элемент:

@media screen and (max-width: 720px) { 
    .col-xs-6:nth-of-type(2n+1) { 
     clear:left; 
    } 
}