Question

我正在努力使它在平板电脑上形成3列2列，在桌面上3上形成2列。我觉得我正在做得很好，但它仍然只显示3然后3 ....而不是2然后2然后2在平板电脑上。有什么想法吗？

    <div class="fluid-container" id="capabilities">
            <h2 class="center">
                SKILLS AND SERVICES
            </h2>

            <div class="row services">

                <div class="col-sm-6 col-md-6 col-lg-4 padding-icon">
                    <img src="images/1.jpg">
                    <h4>

                    </h4>
                    <p>

                    </p>
                </div>

                <div class="col-sm-6 col-md-6 col-lg-4 padding-icon">
                    <img src="images/2.jpg">
                    <h4>

                    </h4>
                    <p>

                    </p>
                </div>

                <div class="col-sm-6 col-md-6 col-lg-4 padding-icon">
                    <img src="images/3.jpg">
                    <h4>

                    </h4>
                    <p>

                    </p>
                </div>

                <div class="col-sm-6 col-md-6 col-lg-4 padding-icon">
                    <img src="images/4.jpg">
                    <h4>

                    </h4>
                    <p>

                    </p>
                </div>

                <div class="col-sm-6 col-md-6 col-lg-4 padding-icon">
                    <img src="images/5.jpg">
                    <h4>

                    </h4>
                    <p>

                    </p>
                </div>

                <div class="col-sm-6 col-md-6 col-lg-4 padding-icon">
                    <img src="images/6.jpg">
                    <h4>

                    </h4>
                    <p>

                    </p>
                </div>
            </div>
        </div>

Answer 1

你在Bootstrap的脚手架系统中有些混淆了。像.col-lg-4这样的类中的数字表示元素占用的列数。鉴于我们知道Bootstrap使用12列网格系统，我们只需要计算每个元素需要多宽（以列为单位）才能实现所需的布局：

对于平板电脑（sm），您希望每行3列。 12/3 = 4，因此每个元素都应该有.col-sm-4。
对于桌面（md），您希望每行2列。 12/2 = 6，因此每个元素都应该有.col-md-6。（你得到了这个。）
不需要.col-lg-*类，因为在md断点之上，您可能正在查看桌面监视器。

因此，每个元素都应该有类.col-sm-4 .col-md-6，就像这个Bootply一样。希望这可以帮助！有时只是坐下来完成数学计算可能会非常有帮助。

（如果您还希望平板电脑布局显示在手机宽度设备上，则应使用.col-xs-4代替.col-sm-4。）

Bootstrap网格布局如何？ 2列3（桌面） - ＆gt; 3列2（平板电脑）

1 个答案: