在哪里放置引导行类答案

【问题标题】：Where to place bootstrap row class在哪里放置引导行类
【发布时间】：2017-07-18 21:59:12
【问题描述】：

我对引导程序和响应式设计的概念相当陌生。

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

我没有得到的是，当您组合不同的 col sizes 时，何时应该使用 </row> 类打破视口？

考虑以下情况，我希望移动设备显示 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 must = 12 中的所有列，对于移动设备和桌面设备，行类需要在不同的点上关闭...？

我将如何解决上述问题，希望这个问题有意义。

谢谢

【问题讨论】：

您想要桌面上的“单列 4 行”，还是桌面上的“单行 4 行”？
一行，如果这听起来很愚蠢，很抱歉，但是“4 行单列”和“4 行单行”有什么区别......？我猜在这种情况下它可能是一个有 4 个 couns 的单行......
查看您的代码我在想“单行 4 行”，因为您有 col-md-3，但您的问题是“在桌面上单列 4 行”。区别：codeply.com/go/2Tth8yqZdC 这就是为什么其他答案使用 col-md-12 这在您的情况下不起作用，但您的问题应该是“在桌面上单行 4 列”。

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

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

在 Bootstrap .row 中有多于（或少于）12 个列单位是可以的。它被称为列换行，只会让多余的列换行到下一行...

来自Bootstrap docs：

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

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

在许多响应式场景（如您的示例）中，必须在单个 .row 元素中拥有超过 12 个列单位。在单个 .row 中，列单位必须为 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?

【讨论】：

对于迟到的接受表示歉意，让我忘记了。感谢您的有用回答

【解决方案2】：

这只是适当的嵌套..您在问题中提到的问题可以通过以下方式解决 - 如您所见，移动设备将显示 2 行和 2 列，而在桌面上，单列将显示 4 行—— 尽管可以使用许多其他 div 嵌套方法来实现，但我只展示了一种这样的配置来实现您想要的布局。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <style type="text/css">
        .btn-xs {
          display: inline-block;
          margin-right: 2%;
        }
       </style>
       </head>
       <body>
       
       <div class="container">
            <div class="row">

                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                AAAAAAA
                </div>

                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                BBBBBBBBBB
                </div>
                </div>
                <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                CCCCCCCCCCC
                </div>

                <div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
                DDDDDDDDDDD
                </div>

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

</div>
</body>
</html>

【讨论】：

不明白反对意见..请添加评论，以便我改进我的答案。

【解决方案3】：

.row 类在 .container 中不是必需的，但无论如何在开始时包含它是个好主意，以防以后需要多行。

.row 真正做的就是确保其中的所有 div 都出现在自己的行上，与前面和后面的 .rows 分开

【讨论】：

【解决方案4】：

只需将所有 div 中的“col-md-3”类更改为“col-md-12”，即可在桌面上显示 4 行单列，在移动设备上显示两行两列。

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

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

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

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

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

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

【讨论】：