我正在尝试创建一个表单元素并排创建的表单,以及它们的标签(与相应输入元素的开头对齐),如下所示:
Label Label2 +----------------+ +-------+ +----------------+ +-------+
以下内容无法正常工作,因为“Label2”与输入元素略有不对齐:
<div class="controls controls-row"> <label class="span9"><span>Label</span></label> <label class="span2"><span>Label2</span></label> </div> <div class="controls controls-row"> <input type="text" class="span9" /> <input type="text" class="span2" /> </div>
我使用这个workaround-ish结构让它工作:
<div class="controls controls-row"> <div class="span9"> <label><span>Label</span></label> </div> <div class="span2"> <label><span>Label2</span></label> </div> </div> <div class="controls controls-row"> <div class="span9"> <input type="text" class="span12" /> </div> <div class="span2"> <input type="text" class="span12" /> </div> </div>
这可能是一个错误吗?因为在Twitter Bootstrap page它说:
Use .span1 to .span12 for inputs that match the same sizes of the grid columns.
Here’s a JSFiddle再现了我的问题.