Question

我有一个快速的Bootstrap问题。我正在设置一个表单，似乎表单标签没有与输入字段对齐。我有一个像这样的问题，之前通过在类中添加clearfix解决了。这并没有解决问题。

小提琴示例：

<div id="pane2" class="tab-pane">
    <div class="well">
        <label class="control-label" for="interview">Label 1</label>
        <div class="controls">
            <div>
                <input type="text" id="interview" name="FDFINTERVIEW" class="" />
            </div>
        </div>
        <label class="control-label" for="resume">Label 2</label>
        <div class="controls">
            <div>
                <input type="text" id="resume" name="FDFMEMOSENT" class="" />
            </div>
        </div>
        <label class="control-label" for="memoreceived">Label 3</label>
        <div class="controls">
            <div>
                <input type="text" id="memoreceived" name="FDFMEMORECV" class="" />
            </div>
        </div>
        <label class="control-label" for="selectionemail">Label 4</label>
        <div class="controls">
            <div>
                <input type="text" id="selectionemail" name="fdfEmailSent" class="" />
            </div>
        </div>
        <label class="control-label" for="fdfSECSbmt">Label 5</label>
        <div class="controls">
            <div>
                <input type="text" id="fdfSECSbmt" name="fdfSECSbmt" class="" />
            </div>
        </div>
        <label class="control-label" for="fdfInSECGrnt">Label 6</label>
        <div class="controls">
            <div>
                <input type="text" id="fdfInSECGrnt" name="fdfInSECGrnt" class="" />
            </div>
        </div>
        <label class="control-label" for="fdfInSECDeny">Label 1=7</label>
        <div class="controls">
            <div>
                <input type="text" id="fdfInSECDeny" name="fdfInSECDeny" class="" />
            </div>
        </div>
        <label class="control-label" for="fdfFullSECGrnt">Label 8</label>
        <div class="controls">
            <div>
                <input type="text" id="fdfFullSECGrnt" name="fdfFullSECGrnt" class="" />
            </div>
        </div>
        <label class="control-label" for="fdfMEDGrnt">Label 9</label>
        <div class="controls">
            <div>
                <input type="text" id="fdfMEDGrnt" name="fdfMEDGrnt" class="" />
            </div>
        </div>
        <label class="control-label" for="fdfEOD">Label 10</label>
        <div class="controls">
            <div>
                <input type="text" id="fdfEOD" name="fdfEOD" class="" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="textarea">Label 11</label>
            <div class="controls">
                <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
        </div>
    </div>
    <!-- end of well -->
</div>

TIA

Answer 1

您必须将该元素放入control-group类并将form-horizontal类添加到表单中，您也不需要额外的div来输入。

<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="interview">Label 1</label>
        <div class="controls">
            <input type="text" id="interview" name="FDFINTERVIEW" class="" /></div>
        </div>
    </div>
</div>

将.form-horizontal添加到表单。

在.control-group
中换行标签和控件
将.control-label添加到标签

将.controls中的所有关联控件换行以进行正确对齐


Twitter Bootstrap doc - 横向表格

Twitter Bootstrap控件div没有对齐

1 个答案: