在引导程序模态中创建引导程序表单时控件不对齐

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>