Бутстрап-колонка и отзывчивые проблемы (с несколькими столбцами на элемент)

Question

У меня есть 3 изображения, которые я хочу всегда идеально по центру в своем div, но вести себя по-разному на основе ширины экрана. Например: на lg показывают 3 поперек, md будет 2 и 1 ниже, sm будет все 3 вертикально сложены.

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

<section class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12 col-md-6 col-lg-4"><img src="image1.png" /></div> 
     <div class="col-sm-12 col-md-6 col-lg-4"><img src="image2.png" /></div> 
     <div class="col-sm-12 col-md-12 col-lg-4"><img src="image3.png" /></div> 
    </div> 
</section> 

Мои вопросы следующим образом:

обновление Обе проблемы были решены путем размещения IMG реагирующих & центр-блок в IMG теги

1. После того, как они ломаются (например, на md ширина экрана) ничто не центрируется! Я попытался использовать центральный блок и написать свой собственный с float: none & margin: 0 auto, но я получаю такое же поведение. Я также попытался поместить каждого в родительский div с любым из этих вариантов безрезультатно.
2. Там всегда что-то левое поле на крайнем левом изображении, заставляя их никогда не будет идеально центрирован

Answer 1

Bootstrap отлично подходит для создания веб-сайтов отзывчивые. Вот решение, которое будет центрировано изображениями в контейнере контейнера с жидкостью, показывая расположение 3 колонок на устройствах lg & md, показывая 2 и 1 ниже, sm будет все 3 вертикально сложены.

http://www.bootply.com/WEoEQo5a5f

/* CSS used here will be applied after bootstrap.css */ 
.thumbnail { 
    border:none; 
    } 

<div class="container-fluid"> 

    <div class="row"> 

     <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"><img src="http://placehold.it/150x150"></div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"><img src="http://placehold.it/150x150"></div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"><img src="http://placehold.it/150x150"></div> 
     </div> 

    </div> 
</div> 

Answer 2

Если вы только собираетесь иметь изображения в этих col-*-* DIVs затем использовать text-align: center;;

HTML

<section class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12 col-md-6 col-lg-4"><img src="http://lorempixel.com/300/300/city/" /></div> 
     <div class="col-sm-12 col-md-6 col-lg-4"><img src="http://lorempixel.com/300/300/city/" /></div> 
     <div class="col-sm-12 col-md-12 col-lg-4"><img src="http://lorempixel.com/300/300/city/" /></div> 
    </div> 
</section> 

CSS

div[class^="col-"] { 
    text-align: center; 
} 

Вы можете добавить свой собственный класс CSS, а не ориентации на DIVs по col-*-* классов, как я сделал.

jsFiddle: http://jsfiddle.net/Lactpch8/

Answer 3

Это модифицированная версия выше решения, которые используют только Загрузочные классы для создания 3 отзывчивого изображения, которое работает отлично на различных устройствах в соответствии с вашими потребностями. http://jsfiddle.net/Lactpch8/1/

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-12 col-md-6 col-lg-4"> 
     <div class="text-center"> 
      <img src="http://lorempixel.com/320/240/sports/2/" class="img-thumbnail text-hide" /> 
     </div> 
    </div> 
    <div class="col-sm-12 col-md-6 col-lg-4"> 
     <div class="text-center"> 
      <img src="http://lorempixel.com/320/240/sports/" class="img-thumbnail text-hide" /> 
     </div> 
    </div> 
    <div class="col-sm-12 col-md-6 col-lg-4"> 
     <div class="text-center"> 
      <img src="http://lorempixel.com/320/240/sports/1/" class="img-thumbnail text-hide" /> 
     </div> 
    </div> 
</div>