在哪里放置bootstrap行类

Question

我是引导程序和响应式设计概念的新手.

我正在阅读bootstrap文档并阅读w3schools的一些教程.所有提及col-必须在一个row班级中= 12 .他们还提到你可以结合不同的col类和大小的例子<div class="col-md-3 col-xs-6">

我没有得到的是</row>当你将不同的东西组合在一起时,你应该什么时候打破视口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

您的代码是正确的，不需要更多.rows。W3schools教程具有误导性，并且说“每行.col-*-*应该始终加起来为 12”是错误的。

Bootstrap 中的列单元可以多于（或少于）12 个.row。它被称为列换行，并且只会使额外的列换行到下一行......

来自引导文档：

“如果单行中放置的列超过 12 列，则每组额外的列将作为一个单元换行到新行”

这就是为什么 Bootstrap 文档中有一些示例演示了在单个.row. 使用列换行时，如果列的高度不同，您确实需要注意响应式重置（称为“clearfix”）。

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

类似的问题..

如果我将超过 12 列排成一行，Bootstrap 会发生什么？

Bootstrap 3 - 行的列总数可以超过 12 吗？