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 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/

响应式，可排序的Bootstrap缩略图

1 个答案: