Question

使用Bootstrap，我是否需要围绕每个单独的输入包装“form-group”类，或者我可以将它包装在整个输入集周围（或者我可以完全省略它，因为我的表单已经使用过和没有它）？

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

如果我将form-group类包装在一系列输入中，那么这就是代码的样子：

<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;
}

它真正做的就是帮助您获得更标准的外观。我的建议是以一致的方式使用它，例如，使用.form-control类的组x元素，或者单独执行它们，但除非绝对必要，否则不要砍掉和更改。

希望这有帮助！

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

1 个答案: