Jump to content
Sign in to follow this  
lawen

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

Recommended Posts

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

 

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

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

  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>
Edited by lawen

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Почитайте по .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>
Edited by lawen

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.