0

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

小提琴示例：

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

4

1 回答 1

3

您必须将元素放在一个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 文档- 水平表单

于 2013-04-16T14:30:45.913 回答