使用 twitter bootstrap 我的所有行加起来应该是 12 吗？

Question

我想知道这里有什么最佳做法。我正在制作一个表单，其中包含通过 form-group class 分组的控件。这具有水平分组的控件，例如一行中的标题、名字、姓氏，然后下一行可以有日、月、年输入。

为了在一行中实现三个控件，我使用了以下标记：

<div class="form-group">                            
    <div class="col-sm-4">
        <label for="title" class="">Title</label>
        <select class="form-control" id="title" name="Title">
            <option value="Mr">Mr</option>
        </select>
    </div>

    <div class="col-sm-4">
        <label for="forename">Forename</label>
        <input class="form-control" id="forename" name="Forename" />
    </div>

    <div class="col-sm-4">
        <label for="surname">Surname</label>
        <input class="form-control" id="surname" name="Surname" />
    </div>

    <div class="col-sm-4">
        <label for="dobDay">Date of birth</label>
        <select class="form-control" id="dobDay" name="DobDay">
            <option value="-1">Day</option>
        </select>
    </div>

    <div class="col-sm-4">
        <label for="dobMonth">Month</label>
        <select class="form-control" id="dobMonth" name="DobMonth">
            <option value="-1">Month</option>
        </select>
    </div>

    <div class="col-sm-4">
        <label for="dobYear">Year</label>
        <select class="form-control" id="dobYear" name="DobYear">
            <option value="-1">Year</option>
        </select>
    </div>
</div>

上面的方法有效，但是我想知道在 form-group 中让所有列加起来是否为 12 是否是最佳做法，所以在这种情况下，我会将出生日期字段分组在 form-group?

Answer 1

a ROW 是 t 12 的总和所以如果你想正确使用 col 网格，你应该将它们包装成一行 div 像这样：

<div class="form-group">  
<div class="row">
   <div class="col-sm-4">some Content</div>
   <div class="col-sm-4">some Content</div>
   <div class="col-sm-4">some Content</div>
</div>

<div class="row">
   <div class="col-sm-4">some Content</div>
   <div class="col-sm-4">some Content</div>
   <div class="col-sm-4">some Content</div>
</div>
</div>

否则类 col-sm* 并没有真正被使用

Answer 2

根据 Bootstrap 文档 (http://getbootstrap.com/css/#grid)..

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

所以连续超过 12 个单元是可以的，它只会导致溢出的 col-* 换行。在构建响应式网站时，这允许在不同屏幕上灵活布局 widths/devices。例如，您可以从中等宽度的 3 列减少到较小宽度的 2 列..

http://bootply.com/qmT5hfIXSJ

Answer 3

除了其他答案所说的关于行加起来为 12 的普遍共识之外，有一行和没有一行在实现上的区别在于，一行就像一个容器单元。如果 div 没有放在行中，那么它将出现在横跨视图宽度的行容器之后。当您有以下代码时，就会看到这种情况：

<div class="row">
    <div class="col-sm-4 inside">in row</div>
    <div class="col-sm-4 inside">in row</div>
    <div class="col-sm-4 inside">in row</div>
    <div class="col-sm-4 inside">in row</div>
</div>
<div class="row">
    <div class="col-sm-4 inside">in row</div>
    <div class="col-sm-4 inside">in row</div>
    <div class="col-sm-4 inside">in row</div>
    <div class="col-sm-4 inside">in row</div>
</div>

有了这个，因为一行中有 16 个列宽，4 个列宽换行到下一行，但仍在行内。所以第二行的下一个 col 宽度 4 div 从第 3 行开始，而不是从第 2 行的 "picking up where the other col 4 width div left off" 开始。你可以在这里看到这个演示中的区别：http://jsfiddle.net/swm53ran/61/

本质上，行 div 用于单独的内容，您不希望其他内容 "bleed" 或 "mix" 进入。行不是您的代码所必需的，但它们可以帮助将部分与其他部分分开

使用 twitter bootstrap 我的所有行加起来应该是 12 吗？

With twitter bootstrap should all my rows add up to 12?

html

css

twitter-bootstrap