Bootstrap 3网格，它*真的*有多少列在一行？ [英] Bootstrap 3 grid, does it *really* matter how many columns are in a row?

问题描述

我有一个表单布局，有引导3表单组。我想要这些表单组在<小，2列在平板电脑尺寸突破和4列在较大的屏幕上。

我显然工作完美，但是在做一些阅读后，我做的似乎违反假定的规则，每行中的每一列必须加起来12.但是每一个教程和文档，我可以找到总是使用狡猾的词，如应该或理想，当说，它应该加起来12.似乎没有

 < div class =row> 
< div class =form-group col-md-6 col-lg-3>< !-.... etc  - > 
  

，我目前在每一行中有4个。这意味着4 * col-lg-3加起来为12，但是4 * col-md-6形成组div加起来不是12。

这似乎并不重要，它在每个断点工作完美。

我应该关心吗？它有什么关系吗？当然，我不应该做两个完全不同的布局，复制所有这些控件一次col-md-6和col-lg-3在同一页上？

解决方案

否，没有任何要求

超过12列 - >包装：

如果总计添加到超过12列， a row 类，它们将只包装到其他行。一个很好的用例是照片网格系统，你想添加吨的照片，但不知道你会有多少行，并仍然想定义列数。

以下代码：

  ; div class ='row'> 
< div class =col-xs-6> Hi< / div> 
< div class =col-xs-6> Hi< / div> 
< div class =col-xs-6> Hi< / div> 
< div class =col-xs-6> Hi< / div> 
< / div> 
  

结果：（

除此之外，有时是这样的情况，12列布局看起来更好，但你不使用它们;它不是数独：）

I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.

I have it apparently working perfectly, however after doing some reading here what I did seems to violate the supposed rule that every column in a row must add up to 12. However every tutorial and docs I could find always use weasel words like "should" or "ideally" when saying it should add up to 12. There doesn't seem to be a clear guidance here.

I defined my groups like this:

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

and I currently have 4 of these in each row. This means that the 4 * col-lg-3 adds up to 12 but the 4 * col-md-6 form group divs adds up to 24 not 12.

However this doesn't seem to matter and it works perfectly at each breakpoint.

Should I be concerned? Does it matter in any way? Surely I'm not supposed to do two completely different layouts that duplicate all these controls once each for col-md-6 and col-lg-3 on the same page?

解决方案

No, there's nothing to mandate that the bootstrap grid must add up to 12 columns.
It's just a preference / stylistic thing.

Less than 12 Columns -> Aligns Left:

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

The following code:

<div class='row'>
    <div class="col-xs-2">Hi</div>
    <div class="col-xs-2">Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

Results in this: (Demo in Fiddle)

More than 12 Columns -> Wraps:

If the total adds to more than 12 columns, as long as the columns are within a row class, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

The following code:

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

Results in this: (Demo in Fiddle)

Other than that, sometimes it's the case that 12 column layouts look better, but you don't have to use them; it's not a sudoku :)

这篇关于Bootstrap 3网格，它*真的*有多少列在一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！