在引导模式中创建引导表单时控制不对齐

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>