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

问题描述

我有一个表单布局，上面有 bootstrap 3 表单组.我希望将这些表单组放在 < 上的单个列中.小尺寸，平板电脑上的 2 列和较大屏幕上的 4 列.

我显然工作得很好，但是在这里阅读了一些内容后，我所做的似乎违反了假设的规则，即一行中的每一列必须加起来为 12.但是，我能找到的每个教程和文档总是使用像黄鼠狼这样的词应该"或理想情况下"说它应该加起来为 12.这里似乎没有明确的指导.

我这样定义我的组:

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

我目前每行有 4 个.这意味着 4 * col-lg-3 加起来是 12，但 4 * col-md-6 表单组 div 加起来是 24 而不是 12.

然而这似乎并不重要，它在每个断点都能完美运行.

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

解决方案

不，没有什么强制要求

超过 12 列 -> 换行:

如果总数增加到超过 12 列，只要这些列在 row 类中，它们就会换行到其他行.一个很好的用例是照片网格系统，您想在其中添加大量照片但不知道将有多少行并且仍想定义列数.

以下代码:

<div class="col-xs-6">嗨</div><div class="col-xs-6">嗨</div><div class="col-xs-6">嗨</div><div class="col-xs-6">嗨</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屋！