css - 响应式、可排序的 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 实现排序，但两者结果相同 - 排序时，缩略图的行会经常中断，从而在网格中留下间隙。

这能以某种方式解决吗？我知道我可以使用 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-media-queries

---

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

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

更多信息请引用: http://jqueryui.com/sortable/