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个cols，在较小的设备上获得2个cols。

Tab和桌面中显示的Bootstrap缩略图

1 个答案:

http://www.bootply.com/118669