css - 在哪里放置 Bootstrap 行类

Question

我对 Bootstrap 和响应式设计的概念相当陌生。

我正在阅读 bootstrap 文档并遵循 w3schools 上的一些教程。所有提及 col-单个 row 中必须 = 12类(class)。他们还提到您可以组合不同的 col类别和大小示例 <div class="col-md-3 col-xs-6">

我没有得到的是什么时候应该用 </row> 打破视口(viewport)当你组合不同的类时col sizes ？

考虑以下情况，我希望移动设备显示 2 行和 2 列，而在桌面设备上显示 4 行的单列

<div class="container">
            <div class="row">

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

                <div class="col-md-3 col-xs-6">
                </div>

           </div><!--/row -->
       </div><!--/container -->  

考虑 rows 中的所有列必须 = 12，行类需要在移动和桌面的不同点上关闭...？

我将如何解决上述问题，希望这个问题是有道理的。

谢谢

Answer 1

您的密码是 correct并且不需要更多的 .row。 W3schools 教程具有误导性，“.col-*-* 应始终 每行加起来等于 12”的说法是错误的。

Bootstrap .row 中多于(或少于)12 个列单元 是可以的。它被称为列换行，只会让额外的列换行到下一行...

来自Bootstrap docs :

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

这就是为什么 Bootstrap 文档中有示例演示在单个 .row 中使用超过 12 列的原因。使用 column wrapping 时你确实需要注意 responsive resets (称为“clearfix”)如果列的高度不同。

在许多响应式场景(如您的示例)中，有必要在单个 .row 元素中具有超过 12 的列单元。一个常见的误解是单行中的列单位必须为 12 或更少。

类似的问题..

Bootstrap what will happen if I put more than 12 columns in a row?

Bootstrap 3 - row can I have columns add up to more then 12?