Bootstrap упорядочить картинки в спойлере

[lawen]

Доброго времени суток.

 

Начинаю ковырять/изучать бутстрап. Который день пытаюсь упорядочить карту цветов в спойлере с помощью бутстрапа, чтобы была адаптивность для телефонов, планшетов и ПК.

Для ПК выводит упорядоченные изображения, а вот для мелких устройств порядок изображений скачет:

1. строка 3 цвета
2. строка 1 цвет и справа расположен
3. строка 3 цвета
4. строка 3 цвета
5. строка 3 цвета
6. строка 3 цвета
7. строка 3 цвета
8. строка 3 цвета
9. строка 1 цвет и справа расположен
10. строка 3 цвета
11. строка 3 цвета
12. строка 1 цвет и справа расположен

колонку col-lg-3 не трогаю, она отвечает за адаптивность к ПК

у колонок col-md-3 / col-sm-6 / col-xc-4 меняю параметры, то так то сяк, но как надо не получается.

 

Прошу помощи у гуру форума!!!

 

Код спойлера прилагаю:

<div class="panel-group" id="collapse-group"> 
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#collapse-group" href="#karta">КАРТА ЦВЕТОВ</a></h4></div>
<div id="karta" class="panel-collapse collapse"> <div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6001.jpg" class="img-responsive"><span>6001</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6002.jpg" class="img-responsive"><span>6002</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6004.jpg" class="img-responsive"><span>6004</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6006.jpg" class="img-responsive"><span>6006</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6007.jpg" class="img-responsive"><span>6007</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6008.jpg" class="img-responsive"><span>6008</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6009.jpg" class="img-responsive"><span>6009</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6010.jpg" class="img-responsive"><span>6010</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6011.jpg" class="img-responsive"><span>6011</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6013.jpg" class="img-responsive"><span>6013</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6014.jpg" class="img-responsive"><span>6014</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6017.jpg" class="img-responsive"><span>6017</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6022.jpg" class="img-responsive"><span>6022</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6023.jpg" class="img-responsive"><span>6023</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6027.jpg" class="img-responsive"><span>6027</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6028.jpg" class="img-responsive"><span>6028</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6029.jpg" class="img-responsive"><span>6029</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6031.jpg" class="img-responsive"><span>6031</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6033.jpg" class="img-responsive"><span>6033</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6040.jpg" class="img-responsive"><span>6040</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6041.jpg" class="img-responsive"><span>6041</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6042.jpg" class="img-responsive"><span>6042</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6043.jpg" class="img-responsive"><span>6043</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6044.jpg" class="img-responsive"><span>6044</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6045.jpg" class="img-responsive"><span>6045</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6046.jpg" class="img-responsive"><span>6046</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6047.jpg" class="img-responsive"><span>6047</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6048.jpg" class="img-responsive"><span>6048</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6049.jpg" class="img-responsive"><span>6049</span></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><img src="http://my-site.com/6050.jpg" class="img-responsive"><span>6050</span></div>
</div>
</div>
</div>
</div>

Змінено 29 листопада 2016 користувачем lawen

[n3bo]

Почитайте по .row

[lawen]

Почитайте по .row

приходила такая мысля, что возможно дело в строках .row

 

Спасибо! Оказывается ссумировать надо было все колонки col-xc-3 до цифры 12 и потом включать их в контейнер с .row

А я ссумировал все разные колонки.

<div class="panel-group" id="collapse-group"> 
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#collapse-group" href="#karta">КАРТА ЦВЕТОВ</a></h4></div>
<div id="karta" class="panel-collapse collapse"> <div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6001.jpg" class="img-responsive"><span>6001</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6002.jpg" class="img-responsive"><span>6002</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6004.jpg" class="img-responsive"><span>6004</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6006.jpg" class="img-responsive"><span>6006</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6007.jpg" class="img-responsive"><span>6007</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6008.jpg" class="img-responsive"><span>6008</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6009.jpg" class="img-responsive"><span>6009</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6010.jpg" class="img-responsive"><span>6010</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6011.jpg" class="img-responsive"><span>6011</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6013.jpg" class="img-responsive"><span>6013</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6014.jpg" class="img-responsive"><span>6014</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6017.jpg" class="img-responsive"><span>6017</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6022.jpg" class="img-responsive"><span>6022</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6023.jpg" class="img-responsive"><span>6023</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6027.jpg" class="img-responsive"><span>6027</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6028.jpg" class="img-responsive"><span>6028</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6029.jpg" class="img-responsive"><span>6029</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6031.jpg" class="img-responsive"><span>6031</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6033.jpg" class="img-responsive"><span>6033</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6040.jpg" class="img-responsive"><span>6040</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6041.jpg" class="img-responsive"><span>6041</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6042.jpg" class="img-responsive"><span>6042</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6043.jpg" class="img-responsive"><span>6043</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6044.jpg" class="img-responsive"><span>6044</span></div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6045.jpg" class="img-responsive"><span>6045</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6046.jpg" class="img-responsive"><span>6046</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6047.jpg" class="img-responsive"><span>6047</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6048.jpg" class="img-responsive"><span>6048</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6049.jpg" class="img-responsive"><span>6049</span></div>
<div class="col-lg-3 col-md-4 col-xs-3"><img src="http://my-site.com/6050.jpg" class="img-responsive"><span>6050</span></div>
</div>
</div>
</div>

Змінено 29 листопада 2016 користувачем lawen