twitter-bootstrap – bootstrap3缩略图网格

发布时间：2020-12-17 20:38:35 所属栏目：安全来源：网络整理

导读：我找到了一个关于bootstrap网格的教程,但它是用bootstrap1.x编写的.现在我想使用bootstrap3来达到同样的效果.该文档说使用.img-thumbnail而不是.media-grid,但它似乎仍无效.我想要的是这样的： 1.x版本是： ul class="media-grid" li a href="#" img src="ht

我找到了一个关于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 -->

解决方法

.img-thumbnail类应用于图像,因此它们获得圆角边框样式,它不是.media-grid的直接替代品,如果您希望图像包装在链接中,那么您最好使用.链接本身的缩略图类为 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!