twitter-bootstrap - bootstrap3 缩略图网格

Question

我找到了一个关于 Bootstrap 网格的教程，但它是用 bootstrap1.x 编写的。现在想用bootstrap3来达到同样的效果。文档说使用 .img 缩略图 而不是 .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 如果您不需要链接，只需缩略图网格