bootstrap3缩略图网格

Question

我找到了一个关于bootstrap网格的教程，但它是用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类作为described here。

要构建您需要使用Bootstrap 3 new grid system的实际网格，您的示例将如下所示：

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

这是 demo fiddle

如果您不需要链接，只需缩略图网格> another fiddle

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>