在哪里放置引导行类 [英] Where to place bootstrap row class

问题描述

我对自举和自适应设计的概念相当陌生。

我正在阅读bootstrap文档并在w3schools上阅读了一些教程。在单个行类中提到 col - must = 12。他们还提到你可以结合不同的 col 类和大小示例< div class =col-md-3 col-xs-6>

我没有得到的是何时应该用< / row> col尺寸？

请考虑以下内容，其中我希望移动设备显示2行2列，桌面上显示4行的单列

 < div类= 容器 > 
< 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  - > 
  

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

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

谢谢

解决方案

您的代码是正确，并且不需要更多 .row s。 W3schools教程有误导性，并且将< .col - * - * 应总是加起来是错误的每行有12个。

在Bootstrap 中，多于（或少于）12个列单元 .row 。它被称为列封装，并将简单地将额外的列换行到下一行...

从 Bootstrap docs ：

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

blockquote>

这就是为什么Bootstrap文档中有示例显示在单个 .row 中使用多于12列的示例。当使用列封装时，您需要了解 响应重置 （称为clearfix）。

在单个.row元素中有很多响应场景（如您的示例）需要使列单元超过12个。这是一种常见的错误概念，即列单位必须小于或等于12个。

类似的问题..

Bootstrap如果我在一行中放置了12列以上，会发生什么？

Bootstrap 3 - 行可以将列加起来多于12吗？

Im fairly new to bootstrap and the concept of responsive design.

I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions col- must = 12 in a single row class. They also mention you can combine different col classes and sizes example <div class="col-md-3 col-xs-6">

What I am not getting is when should you break the viewport with the </row> class when you combine different col sizes ?

Consider the following, where I want a mobile device to display 2 rows and 2 columns and on desktop a single column with 4 rows

<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 -->  

Considering all columns inside rows must = 12, the row class would need to be closed on different points for mobile and desktop...?

How would I tackle the above problem, hope the question makes sense.

Thank you

解决方案

Your code is correct and doesn't need more .rows. The W3schools tutorial is misleading, and it's wrong to say ".col-*-* should always add up to 12 for each row".

It's ok to have more (or less) than 12 column units in a Bootstrap .row. It's known as column wrapping, and will simply make the extra columns wrap to the next line...

From the 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"

That's why there are examples in the Bootstrap docs that demonstrate using more than 12 columns in a single .row. When using column wrapping you do need to be aware of responsive resets (known as "clearfix") if the columns vary in height.

There are many responsive scenarios (like your example) where it's necessary to have column units exceeding 12 in a single .row element. It's a common misconception that column units must be 12 or less in a single .row.

Similar Questions..

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?

这篇关于在哪里放置引导行类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！