Twitter引导形式 - 水平在模态内

Aeo*_*lai 8 twitter-bootstrap

我试图在bootstrap模式中创建一个表单,标签显示为内联.我已经应用了表单水平样式,它在模态外部正确显示表单,标签右对齐字段.但是,我不能让这种风格在模态中工作.标签始终显示在字段上方.如何让标签出现在模态内的标签旁边?

<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>
Run Code Online (Sandbox Code Playgroud)

yna*_*ame 3

我的工作代码:

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

  • 简而言之:“form-horizo​​ntal”类需要应用于模式的内容 div 而不是表单元素本身。 (8认同)