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

Question

我使用 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>

Answer 1

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

http://www.bootply.com/118669