lawen

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

Рекомендуемые сообщения

lawen    6

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

 

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

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

  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>
Изменено пользователем lawen

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
n3bo    188

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
lawen    6

Почитайте по .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>
Изменено пользователем lawen

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу