twitter bootstrap：表单内需要表单组类

Question

使用 Bootstrap，我是否需要将“表单组”类包装在每个单独的输入周围，或者我可以将它包装在整个输入集周围（或者我可以完全省略它，因为我的表单可以使用和不使用它） ?

根据引导文档，它似乎只是用于格式化目的（“最佳间距”），并且不需要正确收集用户输入：http://getbootstrap.com/css/#forms

如果我将表单组类包装在一系列输入周围，代码如下所示：

<form class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-6">
            <label for="one" class="col-sm-2 control-label">Input One:</label>
            <div class="col-sm-10">
                <input type="number" step="any" class="form-control" id="one">
            </div>
            <label for="two" class="col-sm-2 control-label">Input Two:</label>
            <div class="col-sm-10">
                <input type="number" step="any" class="form-control" id="two">
            </div>
        </div>
    </div>
</form>

我也想知道推荐的做法是否建议使用它。

Answer 1

bootstrap 的伟大之处在于，它取决于您。您是正确的，因为它仅用于样式目的。使用form-control 类只会将以下样式添加到元素中：

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

它真正做的只是帮助您获得更标准的表格。我的建议是以一致的方式使用它，例如，将 x 元素与 .form-control 类组合在一起，或者单独进行，但除非绝对必要，否则不要随意更改。

希望这会有所帮助！