选项卡和桌面中显示的引导程序缩略图答案

【问题标题】：Bootstrap thumbnail shown in Tab and Desktop选项卡和桌面中显示的引导程序缩略图
【发布时间】：2014-04-05 21:26:48
【问题描述】：

我使用 bootstrap 3 构建我的网站，以及在手机和 iPad 等移动设备中查看，我有引导缩略图来循环我的产品，但在 iPad 垂直或水平视图中看起来很奇怪，所有缩略图看起来都很窄并垂直拉伸，请查看屏幕截图，我对这部分不太了解<div class="col-sm-6 col-sm-3">，有人可以帮忙吗？

<div class="row">

    <div class="col-sm-9" role="main">
        <div class="bs-docs-section">

        <div class="row">

                    //loop products from db

                    <div class="col-sm-6 col-sm-3">
                        <div class="thumbnail">
                            <img alt="170x200" data-src="holder.js/170x200" style="width: 170px; height: 200px;" src="">
                            <div class="caption">
                                <h4>Product Name</h4>
                                <p>Description</p>
                                <p>
                                <a class="btn btn-primary" role="button" href="#">Button</a>
                                </p>
                            </div>
                        </div>
                    </div>

                   // and so on

        </div>

        </div>
    </div>

    <div class="col-lg-3" role="complementary">
    submenu
    </div>

</div>

【问题讨论】：

在您的缩略图 div 上，您声明了 col-sm-6 和 col-sm-6。你的意思是可能有 col-xs-6 和 col-sm-3 吗？或者可能是 col-md-* 或 col-lg-* 类？

标签： twitter-bootstrap twitter-bootstrap-3 thumbnails

【解决方案1】：

没有理由一起使用col-sm-6 col-sm-3。您可以使用<div class="col-xs-6 col-md-3"> 在更宽的设备上获取 4 列，在更小的设备上获取 2 列。

http://www.bootply.com/118669

【讨论】：