контроль не allineate при создании формы начальной загрузки внутри начальной загрузки

Question

Я пытаюсь создать форму для отправки данных через ajax, я создаю форму начальной загрузки внутри начальной загрузки, но элементы управления не выровнены. Есть 2 выровненных поля ввода и 3 других не выровненных поля. Где я не прав?

посмотрите это jsfiddle

              <form role="form" id="NuovaSegnalazioneModalForm" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-3" for="Latitudine">Latitudine:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="Latitudine" name="Latitudine" placeholder="Impostare la Latitudine" require />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="Longitudine">Longitudine:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="Longitudine" name="Longitudine" placeholder="Impostare la Longitudine" require />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="TipologiaFormControlSelect">Tipologia:</label>
                        <select class="col-md-9" id="TipologiaFormControlSelect">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="GravitàFormControlSelect">Gravità:</label>
                        <select class="col-md-9" id="GravitàFormControlSelect">
                            <option>Molto Lieve</option>
                            <option>Lieve</option>
                            <option>Medio</option>
                            <option>Importante</option>
                            <option>Grave</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="NoteFormControlTextarea">Note:</label>
                        <textarea class="col-md-12" id="NoteFormControlTextarea" rows="5"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="FotoFormControlFile">File Foto:</label>
                        <input type="file" class="form-control-file col-md-9" id="FotoFormControlFile">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
                        <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
                    </div>
                </form>

Answer 1

Вы применяете класс col-*-* непосредственно к каждому <select> вместо того, чтобы следовать той же схеме, что и у вашего <input>, где у вас есть обертка для столбцов, а затем использовать .form-control для правильного определения размера.

Настройка других элементов формы в соответствии с правильным шаблоном приведет к желаемым результатам:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form role="form" id="NuovaSegnalazioneModalForm" class="form-horizontal">

<div class="form-group">
  <label class="control-label col-md-3" for="Latitudine">Latitudine:</label>
  <div class="col-md-9">
    <input type="text" class="form-control" id="Latitudine" name="Latitudine" placeholder="Impostare la Latitudine" require />
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3" for="Longitudine">Longitudine:</label>
  <div class="col-md-9">
    <input type="text" class="form-control" id="Longitudine" name="Longitudine" placeholder="Impostare la Longitudine" require />
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3" for="TipologiaFormControlSelect">Tipologia:</label>
  <div class="col-md-9">
    <select class="form-control" id="TipologiaFormControlSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3" for="GravitàFormControlSelect">Gravità:</label>
  <div class="col-md-9">
    <select class="form-control" id="GravitàFormControlSelect">
    <option>Molto Lieve</option>
    <option>Lieve</option>
    <option>Medio</option>
    <option>Importante</option>
    <option>Grave</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3" for="NoteFormControlTextarea">Note:</label>
  <div class="col-md-12">
    <textarea class="form-control" id="NoteFormControlTextarea" rows="5"></textarea>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3" for="FotoFormControlFile">File Foto:</label>
  <div class="col-md-9">
    <input type="file" class="form-control-file form-control" id="FotoFormControlFile">
  </div>
</div>

<div class="modal-footer">
  <button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
  <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>

</form>