Bootstrap 3.0 отзыв 5 изображений в одной строке

У меня возникла проблема с загрузкой 3.0, создающей 5 изображений в одной строке и реагирующей на них? Система сетки основана на 12, поэтому как сделать 5 изображений, и они выглядят центрированными без каких-либо пробелов?

Кроме того, я могу сделать, если смотреть на планшеты или смартфоны < 480 px, чтобы быть 2 изображениями на сырье? прямо сейчас он показывает 5 изображений друг под другом?

вот мой код:

<div class="row">
 <div class="col-md-2">
 <img class="img-responsive" src="/images/img1.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
 <img class="img-responsive" src="/images/img3.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
  <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

Как вы можете видеть, я использую col-md-2 Наряду с img-отзывчивым? но его не работает, потому что его не центрированный

Ответ 1

У вас может быть пустой столбец с обеих сторон:

<div class="row">
 <div class="col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

Ответ 2

Чтобы ответить на другой вопрос:

Также есть я могу сделать, если смотреть на планшеты или смартфоны < 480 пикселей - 2 изображения на сырье? сейчас он показывает 5 изображений под каждым другой??

Ответ: да. Кроме того, используя col-xs-6, вы получите 2 изображения в строке для всех видов просмотра менее 768px.

<div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

Если вы хотите настроить Bootstrap через LESS, SASS или с помощью настройки здесь: http://getbootstrap.com/customize/, вы наверняка сможете адаптировать столбцы сетки и точки останова. Я имею в виду, что вы можете создать сетку из десяти столбцов или сетку с пятью столбцами, и если вы предпочитаете иметь контрольную точку xs на 480 пикселей, вы тоже можете это сделать.

Для этого вам нужно будет изменить значения системной системы: http://getbootstrap.com/customize/#grid-system и http://getbootstrap.com/customize/#media-queries-breakpoints

Это все еще Bootstrap со всей его добротой, это просто пользовательская версия для ваших требований.

Ответ 3

Вам нужно создать класс столбца (я назвал его col-sm-5cols, но назову его любым, как вам нравится), с стилем, как и с бутстрапом существующих столбцов, а затем дайте ему ширину 20%, когда в нужном размере, через медиа-запрос.

.col-sm-5cols{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
.col-sm-5cols {
        width: 20%;
        float: left;
    }
}

Пример: http://www.bootply.com/YpKhYwVqfD

И чтобы получить настройку 2-х столбцов на мобильном телефоне, вы можете использовать col-sm-6, чтобы закрыть или снова настроить меньшие столбцы с медиа-запросом на 480px и width:50%