twitter-bootstrap - bootstrap3 缩略图网格

Question

我找到了一个关于引导网格的教程，但它是用 bootstrap1.x 编写的。现在想用bootstrap3来达到同样的效果。该文档说使用.img-thumbnail而不是.media-grid，但它似乎仍然不起作用。我想要的是这样的：

1.x 版本是：

<ul class="media-grid">
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />
                </a>
            </li>

    <!-- row of 4 thumbnails -->
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>       

        </ul><!-- end media-grid -->

Answer 1

该类.img-thumbnail应用于图像，因此它们具有圆角边框样式，它不是 的直接替代品.media-grid，此外，如果您希望将图像包装在链接中，那么最好按照此处所述在.thumbnail链接本身上使用该类。

要构建实际的网格，您需要使用 Bootstrap 3 的新网格系统，您的示例如下所示：

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
          <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
    </div>
</div>

这是一个演示小提琴

如果您不需要链接，这是另一个小提琴，只需缩略图网格

Answer 2

<div class="container">
<div class="row">
    <div class="col-xs-4">
       Some Image
    </div>
    <div class="col-xs-4">
        Some Image
    </div>
    <div class="col-xs-4">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
    <div class="col-xs-3">
       Some Image
    </div>
</div>