twitter bootstrap：是窗体内部所需的窗体组类

Question

使用Bootstrap，我是否需要将“form-group”类包装在每个单独的输入中，还是可以将它包装在整个输入集合中？完全忽略它，因为我的表单已经和没有它一起工作）？

根据它好像它使用简单，它们的目的（“最佳间距”），并且不需要进行正确收集用户输入的引导文档：http://getbootstrap.com/css/#forms

下面的代码看起来，如果我换了样form-group class围绕一系列输入：

<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组元素，或者单独使用它们，但是除非绝对必要，否则不要砍断和改变。

希望这会有所帮助！