我试图在引导模态内创建一个带有内联显示标签的表单。我已经应用了表单水平样式,该样式在模式外部可以正确显示表单,并且标签与字段正确对齐。但是,我无法在模态中使用这种样式。标签始终显示在字段上方。如何使标签显示在模态中的标签旁边?

<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>

最佳答案

我的工作代码:

<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>

关于twitter-bootstrap - Twitter Bootstrap在模式内部的水平形式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18292173/

10-10 02:00