Question

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

我正在阅读自助文档并阅读有关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

您的代码为correct，不需要更多.row秒。 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?

Answer 2

只需更改＆＃34; col-md-3＆＃34;上课到＃34; col-md-12＆＃34;在所有div中，在桌面上显示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 -->

Answer 3

这只是恰当的嵌套......你在问题中提到的问题可以通过以下方式解决 - 正如您所看到的，移动设备将显示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>

Answer 4

.container中不需要.row类，但是当你开始想要多行时，最好还是包含它。

所有.row真的确保它内部的所有div都出现在它们自己的行上，与前一行和后一行分开。

在哪里放置bootstrap行类

4 个答案: