Question

我需要创建一个图标网格，在移动设备上查看时不会堆叠。我现在有这个设置：

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element1
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element1" />
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element2
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element2" />
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element3
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element3" />
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <div class="caption">Element4
                    <br />
                </div>
                <img src="http://placehold.it/70x70" alt="Element4" />
            </div>
        </li>
    </ul>
</div>
</div>

但是当输出窗口低于某个宽度时，所有图标都堆叠在一起。我想让它们内联，因为它们非常小，就像桌面版一样。最好的方法是什么？

还有一个请求，但不太重要：图标数量可能会有所不同。它们可以是1到4甚至更多（显示2行没问题）。是否有 bootstrap （或css）方法让它们在连续小于4时居中？

jsFiddle link

Answer 1

最好的办法是不要使用bootstrap类。

<强> HTML

<div class="thumbnails">
    <div class="thumbnail">
        <div class="caption">Element1</div>
        <img src="http://placehold.it/70x70" alt="Element1" />
    </div>
    <div class="thumbnail">
        <div class="caption">Element2</div>
        <img src="http://placehold.it/70x70" alt="Element2" />
    </div>
    <div class="thumbnail">
        <div class="caption">Element3</div>
        <img src="http://placehold.it/70x70" alt="Element3" />
    </div>
    <div class="thumbnail">
        <div class="caption">Element4</div>
        <img src="http://placehold.it/70x70" alt="Element4" />
    </div>
</div>

<强> CSS

.thumbnails {text-align: center;}
.thumbnails .thumbnail {display: inline-block; margin: 0 5px;}

<强>样本

http://jsfiddle.net/hap4vvex/

注意：缩略图不占用整个宽度，但它们以任何数字为中心

Answer 2

我认为你正在使用一些旧的Bootstrap类。

我还没有对此代码进行测试，但请尝试http://pastebin.com/SuiuK2pN

Bootstrap：创建图标网格

2 个答案: