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

Question

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

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

<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

根据 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-* 换行。在构建响应式网站时，这允许在不同的屏幕宽度/设备上进行灵活的布局。例如，您可以从中等宽度的 3 列减少到较小宽度的 2 列。

http://bootply.com/qmT5hfIXSJ