我正在尝试使用Bootstrap创建一个表单,其中字段是水平的,但标签位于字段上方。我有的HTML是
<form class="form-inline">
<fieldset class="span6">
<legend>Personal Details</legend>
<label>Firstname</label><input class="span12" type="text">
<label>Surname</label><input class="span12" type="text">
<label for="PhoneNumber">Phone Number</label><input id="PhoneNumber" class="span6" type="text">
<label for="MobilePhone">Mobile Phone</label><input id="MobilePhone" class="span6" type="text">
<label>Email Address</label><input class="span12" type="text">
</fieldset>
<fieldset class="span6">
<legend>Address Details</legend>
</fieldset>
</form>
这会生成一个看起来像
的表单
但我想要的是看似
的东西
我需要什么Twitter Bootstrap魔法呢?
答案 0 :(得分:10)
看起来我设法解决了自己的问题。 Html改为
<form class="form-inline">
<fieldset class="span6">
<legend>Personal Details</legend>
<label>Firstname</label><input class="span12" type="text">
<label>Surname</label><input class="span12" type="text">
<div class="controls-row">
<div class="control-group span6">
<label for="PhoneNumber">Phone Number</label>
<input id="PhoneNumber" class="span12" type="text">
</div>
<div class="control-group span6">
<label for="MobilePhone">Mobile Phone</label>
<input id="MobilePhone" class="span12" type="text">
</div>
</div>
<label>Email Address</label><input class="span12" type="text">
</fieldset>
<fieldset class="span6">
<legend>Address Details</legend>
</fieldset>
</form>