Twitter bootstrap form-horizontal inside a modal

Question

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>

Answer 1

My working code:

<div id="deleteGroupForm" class="modal hide fade in">
    <form method="POST" action="${home}/administrator/groups" class="non-margined">
        <input type="hidden" name="_method" value="DELETE" />
        <input type="hidden" class="id-holder" name="id" value="" />
        <div class="modal-header">
            <button type='button' class='close' data-dismiss='modal'>×</button>
            <h3><spring:message code="delete" /></h3>
        </div>
        <div class="modal-body form-horizontal">
            <p><spring:message code="delete.confirmation" /></p>
            <div class="alert">
                <strong><spring:message code="warning" />!</strong>&nbsp;<spring:message code="group.delete.warn" />
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal"><spring:message code="cancel" /></a>
            <input class="btn btn-danger" type="submit" value="<spring:message code="delete" />" />
        </div>
    </form>
</div>