twitter bootstrap 以水平形式正确调整标签字段答案

【问题标题】：twitter bootstrap ajust label field properly in horizontal formtwitter bootstrap 以水平形式正确调整标签字段
【发布时间】：2012-11-08 11:54:36
【问题描述】：

我们有以下形式：

    <div class="form-horizontal">
   <fieldset>
      <legend>Reports</legend>
      <div class="control-group">
         <label class="control-label">Year</label>
         <div class="controls">
            <select id="ddlYear" class="input-small">
               <option value="2011">2011</option>
               <option selected="selected" value="2012">2012</option>
            </select>
         </div>
      </div>
      <div class="control-group">
         <label class="control-label">Project</label>
         <div class="controls">
            <label class="" id="lbProjectDesc">House X repairs</label>
         </div>
      </div>
      <div class="control-group">
         <label class="control-label">Costs</label>
         <div class="controls">
            <div class="input-append">
               <input type="text" value="0,0" class="span2" id="tbCosts" disabled="disabled"  >
               <span class="add-on">€</span>
            </div>
         </div>
      </div>
      <hr>
      <div class="control-group">
         <div class="controls">
            <input type="submit"  value="Save" onclick="$(this).button('loading');" id="btnSave" class="btn btn-primary" data-loading-text="Saving...">
         </div>
      </div>
   </fieldset>
</div>

http://jsfiddle.net/9JNcJ/2/

问题是标签 lbProjectDesc (text="House X repairs") 显示不正确。

我们可以设置什么类或者需要进行什么更改来修复它？（最好是正确的方式，不是css hack）

【问题讨论】：

标签： html css forms twitter-bootstrap label

【解决方案1】：

#lbProjectDesc {
margin-top: 5px;
}

（不认为这是“黑客”：）分叉：http://jsfiddle.net/davidkonrad/LK95Q/

【讨论】：

+1 为了有效，但不能在全球范围内适用（我们需要水平表单内的每个标签 1 条规则），我们不能将其标记为正确的 awnser

【解决方案2】：

考虑到 Selva 和 davidkonrad 的回应，我们这样解决了这个问题：

.form-horizontal .control-group .controls label {
 margin-top: 5px;
}

这样它会影响标签在水平表单内但不会垂直取代其他输入类型的描述标签的所有情况......

也适用于 padding-top: 5px;

【讨论】：

【解决方案3】：

避免不必要的填充并设置您想要的任何内容。这里的问题是填充。

 #lbProjectDesc {
 margin-top: 5px;
}

添加并查看。

演示：http://jsfiddle.net/9JNcJ/5/

【讨论】：

此解决方案的问题在于它会影响您小提琴中的所有 .control-labels...如果您修改 padding-top 您可以看到它如何移动其余标签（这会影响“年份”与其选择之间以及“成本”与其输入之间的垂直对齐）
你可以专门添加类。