2012-11-08 44 views
0

正确,我们有以下形式:Twitter的引导ajust标签字段水平形式

<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(文=“众议院X修理”)显示不正确。

我们可以设置什么类别或需要做什么修改来修复它? (最好是正确的方法,而不是一个CSS破解)

回答

1

考虑到热带雨林和davidkonrad回应,我们解决了它这样的:

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

这样,它会影响所有标注的水平表格内,但犯规verticaly置换描述的情况下,其他输入类型的标签...

Works with padding-top:5px;

1
#lbProjectDesc { 
margin-top: 5px; 
} 

(不考虑这是一个“黑客” :)分叉:http://jsfiddle.net/davidkonrad/LK95Q/

+0

+1为了有效,但不适用于全局(我们需要在横向表单中每个标签需要1条规则),我们不能将其标记为正确的awnser – VSP

0

从避免不必要的填充和设定什么都你想。这里的问题是填充。

#lbProjectDesc { 
margin-top: 5px; 
} 

添加并参阅。

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

+0

此解决方案的问题是它会影响所有.control-标签在你的小提琴中...如果你修改了填充顶部,你可以看到它是如何移动标签的其余部分的(它影响“Year”和它的选择之间以及“Cost”和它的输入之间的垂直对齐) – VSP

+0

你可以专门添加班级。 – Selvamani

+0

我在这段代码中编辑了一些东西。 – Selvamani