我正在尝试在Bootstrap模态框中创建一个表单,其中标签显示为内联。我已经应用了form-horizontal样式,在模态框外部显示表单时,标签与字段右对齐且显示正确。但是,我无法在模态框内部使用此样式。标签始终出现在字段上方。如何使标签出现在模态框内的标签旁边?
<div id="editModal" class="modal edit-modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Edit interlining</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="nameInput">Name</label>
<div class="controls">
<input id="nameInput" type="text" value="Interlining A">
</div>
</div>
<div class="control-group">
<label class="control-label" for="widthInput">Width</label>
<div class="controls">
<input id="widthInput" type="text" value="130">
</div>
</div>
<div class="control-group">
<label class="control-label" for="patternInput">Pattern Repeat</label>
<div class="controls">
<input id="patternInput" type="text" value="70">
</div>
</div>
<div class="control-group">
<label class="control-label">Price</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">£</span> <input id="priceinput" name="priceinput" class="span2" placeholder="" type="text" required="" value="90.02">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<a href="/admin/fabricsave/3" class="btn btn-primary">Save</a> <a href="#" class="btn" data-dismiss="modal">Cancel</a>
</div>