css - Twitter Bootstrap 控制 div 不对齐

Question

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

fiddle 示例:

http://jsfiddle.net/mwoods98/P6ux2/1/

<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-horizo​​ntal 类添加到您的表单中，您也不需要额外的 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>

---

• Add .form-horizontal to the form.
• Wrap labels and controls in .control-group
• Add .control-label to the label
• Wrap any associated controls in .controls for proper alignment

Twitter Bootstrap doc - Horizontal Form