Twitter bootstrap form-horizontal inside a modal

Twitter bootstrap form-horizontal inside a modal

I've trying to create a form inside a bootstrap modal with labels
displayed inline. I've applied the form-horizontal styles, which outside
of the modal display the form correctly, with the labels right aligned to
fields. However, I can't get this style to work inside the modal. The
labels always appear above the fields. How can I get the labels to appear
next to the labels inside the modal?
<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>