Bootstrap模态框内嵌表单控件不对齐问题排查求助

我看了你的代码，控件不对齐的原因是没有严格遵循Bootstrap form-horizontal的布局规范，以及部分控件缺少必要的样式类。下面分点说明问题和修复方案：

问题分析 #

• 下拉选框（select）：你直接给select加了col-md-9类，但没有把它包裹在div.col-md-9容器中，同时缺少form-control类——这个类是Bootstrap统一表单控件样式的关键，没有它的话，select的内边距、高度等样式会和输入框不一致。
• 文本域（textarea）：你给textarea加了col-md-12，这会让它占满整个模态框宽度，而不是和前面的输入框一样，在col-md-9的区域内对齐；同样也缺少form-control类。
• 文件上传控件：form-control-file和col-md-9直接加在input上不符合布局规范，应该把input放在div.col-md-9容器内，而且Bootstrap的文件上传控件不需要额外的form-control类，只需要form-control-file即可。

修正后的完整代码 #

<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" required />
    </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" required />
    </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-9">
      <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" 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>

关键修复点总结 #

• 所有表单控件（除了按钮）都要放在对应列的div容器内（比如div.col-md-9），和label的col-md-3形成布局对应。
• 文本输入框、下拉选框、文本域都需要添加form-control类，保证统一的内边距、高度和对齐方式。
• 文件上传控件放在col-md-9容器内，使用form-control-file类即可，不需要额外的列类直接加在input上。

这样修改后，所有控件就能和输入框保持一致的对齐效果啦！

内容的提问来源于stack exchange，提问作者Marco