Bootstrap多行标签导致列大小调整问题

Question

每当我尝试创建一个包裹到第二行的标签时，它就会开始弄乱列放置。

    <div class="form-group">
        <label for="ReqPhone" class="col-sm-3 control-label">Phone Number:</label>
        <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
        <div class="col-sm-8">
            <input type="text" class="form-control" data-validation="required" name="ReqPhone" id="ReqPhone" placeholder="Phone Number" maxlength="20">
        </div>
    </div>
    <div class="form-group">
        <label for="ReqPhone" class="col-sm-3 control-label">Are you the Nominee’s Direct Supervisor?</label>
        <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
        <div class="col-sm-8">
            <select class="form-control">
                <option value="" disabled selected>Select an Option...</option>
                <option value="one">Yes</option>
                <option value="two">No</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="ReqPhone" class="col-sm-3 control-label">Supervisor's Name:</label>
        <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
        <div class="col-sm-8">
            <select class="form-control">
                <option value="" disabled selected>Select an Option...</option>
                <option value="one">Yes</option>
                <option value="two">No</option>
            </select>
        </div>
    </div>

这就是我得到的结果。我只是想在拥有多行标签的同时正确堆叠它们。

Answer 1

首先，我注意到所有标签都是针对相同的输入（“ReqPhone”）。 第二，你用于表格的课程是什么？尝试使用form class='form-horizontal'

也许这会有所帮助：

    <div class="form-group">
    <label for="ReqPhone" class="col-sm-3 control-label">Phone Number:</label>
    <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
    <div class="col-sm-8">
        <input type="text" class="form-control" data-validation="required" name="ReqPhone" id="ReqPhone" placeholder="Phone Number" maxlength="20">
    </div>
</div>
<div class="form-group">
    <label for="Nominee" class="col-sm-3 control-label">Are you the Nominee’s Direct Supervisor?</label>
    <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
    <div class="col-sm-8">
        <select class="form-control" id='Nominee'>
            <option value="" disabled selected>Select an Option...</option>
            <option value="one">Yes</option>
            <option value="two">No</option>
        </select>
    </div>
</div>
<div class="form-group">
    <label for="NameSupervisor" class="col-sm-3 control-label">Supervisor's Name:</label>
    <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
    <div class="col-sm-8">
        <select class="form-control" id='NameSupervisor'>
            <option value="" disabled selected>Select an Option...</option>
            <option value="one">Yes</option>
            <option value="two">No</option>
        </select>
    </div>
</div>

Answer 2

确保它在form-horizontal ..

中

<div class="form form-horizontal">
        <div class="form-group">
            <label for="ReqPhone" class="col-sm-3 control-label">Phone Number:</label>
            <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
            <div class="col-sm-8">
                <input type="text" class="form-control" data-validation="required" name="ReqPhone" id="ReqPhone" placeholder="Phone Number" maxlength="20">
            </div>
        </div>
        <div class="form-group">
            <label for="ReqPhone" class="col-sm-3 control-label">Are you the Nominee’s Direct Supervisor?</label>
            <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
            <div class="col-sm-8">
                <select class="form-control">
                    <option value="" disabled="" selected="">Select an Option...</option>
                    <option value="one">Yes</option>
                    <option value="two">No</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="ReqPhone" class="col-sm-3 control-label">Supervisor's Name:</label>
            <input type="hidden" name="Phone" value="<?php echo $ophone ?>">
            <div class="col-sm-8">
                <select class="form-control">
                    <option value="" disabled="" selected="">Select an Option...</option>
                    <option value="one">Yes</option>
                    <option value="two">No</option>
                </select>
            </div>
        </div>
    </div>

http://www.codeply.com/go/lmk2IyMz14