Многострочная метка 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