响应灵敏、可排序的引导区缩略图

Question

我想使用Bootstrap 3格式化缩略图列表，以便在大屏幕上按4行显示，在小屏幕上按2行显示。此外，我需要能够拖放缩略图来更改它们的顺序。

到目前为止，我尝试了这个标记

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

样式像这样（较少）

.thumbnails {
    .row;
    .clearfix;
    .thumbnail-container {
        .make-md-column(3);
        &:nth-child(4n+1) {
            clear: left;
        }
    }
}

我使用clear是因为缩略图的高度不相等。我尝试使用jQueryUI-Sortable和这个脚本来实现排序，但最终都是一样的——排序时，缩略图的行会经常断裂，在网格中留下间隙。

这能以某种方式解决吗？我知道我可以使用像Masonry或Isotope这样的东西，但这对我来说似乎太过分了。在最新的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 col-sm-6 col-md-3 col-lg-3"。这基本上告诉，在超小型设备上，拇指应该占据容器的整个宽度（12/12）；在小型设备上，它应该占宽度的一半（6/12），在中型和大型屏幕上，它将占宽度的四分之一（3/12）。

有关详细信息：http://getbootstrap.com/css/#grid-媒体查询

---

如果你想拖放缩略图，我建议你使用第三方JavaScript来实现这一点。例如，您可以像这样使用"jQuery UI Sortable"：

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

有关详细信息，请参阅：http://jqueryui.com/sortable/