Отзывчивые, сортируемые миниатюры Bootstrap

Question

Я хотел бы отформатировать список миниатюр с помощью Bootstrap 3, чтобы они отображались в строках 4 на больших экранах, 2 на меньших экранах и т. Д. Также мне нужно уметь перетаскивать и снимите миниатюры, чтобы изменить их порядок.

До сих пор я пытался эту разметку

<ul class="thumbnails list-unstyled"> 
<li class="thumbnail-container"> 
     <div class="thumbnail"> 
      <img src="..."> 
     </div> 
    </li> 
</ul> 

стилизованную вверх, как это (LESS)

.thumbnails { 
    .row; 
    .clearfix; 

    .thumbnail-container { 
     .make-md-column(3); 

     &:nth-child(4n+1) { 
      clear: left; 
     } 
    } 
} 

Я использовал clear потому, что миниатюры не одинаковой высоты. Я попытался реализовать сортировку с использованием jQuery UI Sortable и this script, но оба они оказались одинаковыми - при сортировке строки миниатюр будут ломаться слишком часто, оставляя пробелы в сетке.

Можно ли как-нибудь обойтись? Я знаю, что могу использовать что-то вроде масонства или изотопа, но для меня это кажется огромным излишеством. Такое поведение наблюдается и в последних версиях Firefox и Chrome.

Answer 1

Используйте силу Bootstrap. Вы можете сделать что-то вроде этого:

<div class="container"> 
    <div id="#sortable" class="row"> 

     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
      <a href="#" class="thumbnail"> 
       <img src="" alt="..."> 
      </a> 
     </div> 

     ... 

    </div> 
</div> 

Магия происходит из-за "Col-XS-12 цв-см-6 цв-мкр-3 цв-LG-3". Это в основном говорит о том, что на дополнительных небольших устройствах большой палец должен иметь полную ширину (12/12) контейнера; на небольших устройствах она должна занимать половину ширины (6/12), а на средних и больших экранах - четверть ширины (3/12).

Для получения дополнительной информации:http://getbootstrap.com/css/#grid-media-queries

---

Если вы хотите, чтобы перетащить эскизы, которые я предлагаю использовать третья сторона JavaScript для достижения этой цели. Например, вы можете использовать «JQuery UI Сортируемый», как это:

<script> 
    $(function() { 
     $("#sortable").sortable(); 
    }); 
</script> 

Для получения дополнительной информации см:http://jqueryui.com/sortable/