Question

我对Bootstrap很新，当涉及前端开发时，我很无用。写后端很容易，但我现在被困了好几个小时试图提出一个像样的输入表格。我有一个模态框（见下面的代码），目前以（在这里检查img http://tinypic.com/r/290wk6v/8）

的形式出现

在图像（上面的链接）上，输入字段未对齐。由于我将有超过15个输入字段，我希望实现类似这样的http://tinypic.com/r/142x69y/8，或者可能有三行字段。如果你们中的任何人是前端人员，请告诉我如何解决这个问题。我已经查看了w3school和他们与引导形式相关的啧啧但我现在更加困惑......

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<div id="addContactsModal"
     class="modal hide fade in centering insertAndUpdateDialogs"
     role="dialog"
     aria-labelledby="addContactsModalLabel"
     aria-hidden="true">
    <div class="modal-header">
        <h3 id="addContactsModalLabel" class="displayInLine">
            <spring:message code="create"/>&nbsp;<spring:message code="purchaseOrder"/>
        </h3>
    </div>
    <div class="modal-body">
        <form name="newContactForm" novalidate >
            <div class="pull-left">
                <div>
                    <div class="input-append">
                        <label>* <spring:message code="tower.name"/>:</label>
                    </div>
                    <div class="input-append">
                        <input type="text"
                               required
                               autofocus
                               ng-model="contact.tower"
                               name="tower"
                               placeholder="<spring:message code='contact'/>&nbsp;<spring:message code='contacts.name'/>"/>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && newContactForm.name.$error.required">
                                        <spring:message code="required"/>
                                </span>
                        </label>
                    </div>
                </div>
                <div>
                    <div class="input-append">
                        <label>* <spring:message code="requestid.name"/>:</label>
                    </div>
                    <div class="input-append">
                        <input type="text"
                               required
                               ng-model="contact.requestid"
                               name="email"
                               placeholder="<spring:message code='sample.requestid'/> "/>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && newContactForm.email.$error.required">
                                    <spring:message code="required"/>
                                </span>
                        </label>
                    </div>
                </div>

                <div>
                    <div class="input-append">
                        <label>* <spring:message code="poid.name"/>:</label>
                    </div>
                    <div class="input-append">
                        <input type="text"
                               required
                               ng-model="contact.poid"
                               name="phoneNumber"
                               placeholder="<spring:message code='sample.poid'/> "/>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && newContactForm.phoneNumber.$error.required">
                                    <spring:message code="required"/>
                                </span>
                        </label>
                    </div>
                </div>

                <input type="submit"
                       class="btn btn-inverse"
                       ng-click="createContact(newContactForm);"
                       value='<spring:message code="create"/>'/>
                <button class="btn btn-inverse"
                        data-dismiss="modal"
                        ng-click="exit('#addContactsModal');"
                        aria-hidden="true">
                    <spring:message code="cancel"/>
                </button>
            </div>
        </form>
    </div>
    <span class="alert alert-error dialogErrorMessage"
          ng-show="errorOnSubmit">
        <spring:message code="request.error"/>
    </span>
</div>

Answer 1

我认为你要找的是bootstrap（http://getbootstrap.com/css/#forms-horizontal）提供的水平表格。从提供的示例中可以看出，您应该在form-group课程中将标签和输入结合在一起。另外，请不要忘记将form-horizontal类添加到form元素中。这应该指向正确的方向：

<form class='form-horizontal'>
    <div class="form-group">
        <label for="element1" class="col-sm-2 control-label">Element 1</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="element1" placeholder="Element 1">
        </div>
    </div>
    <div class="form-group">
        <label for="element2" class="col-sm-2 control-label">Element 2</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="element2" placeholder="Element 2">
        </div>
    </div>
</form>

在form-group中，您必须添加一个2列宽的label和一个包含在10列宽度div中的输入元素。另外我认为你错了input-append。我没有看到那里的用途。

如果您想在列中排列元素，则还需要在网格中排列form-group div元素，如下所示：

<form class='form-horizontal'>
    <div class='row'>
        <div class='col-sm-6'>
            ...First column form groups...
        </div>
        <div class='col-sm-6'>
            ...Second column form groups...
        </div>
    </div>
    <div class='row'>
        <div class='col-sm-12'>
            ...Buttons...
        </div>
    </div>
</form>

输入字段的Bootstrap对齐

1 个答案: