文本框与按钮未对齐求助：如何实现二者平滑对齐？

我完全懂你的困扰——明明想让表单控件整整齐齐，结果文本框和按钮的底线却不在同一水平线上，看着特别别扭！

先看看你提供的代码：

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label>
 <div class="col-md-9 col-sm-7 col-xs-12">
 <div class="input-group input-file" >
 <span class="input-group-btn">
 <button class="btn btn-info btn-choose float-left" type="button">Choose</button>
 </span>
 <input type="text" class="form-control" id="Pic" placeholder='Choose a file...' />
 <span class="input-group-btn">
 <button class="btn btn-danger btn-reset float-left" type="button">Reset</button>
 </span>
 </div>
 </div>
 </div>

问题其实出在按钮上的float-left类！Bootstrap的input-group-btn组件已经内置了专门的布局逻辑，用来让按钮和输入框完美对齐。你额外添加的float-left会打破这种默认布局，直接导致按钮错位。

给你两个简单的解决步骤：

• 直接移除两个按钮上的float-left类，让Bootstrap的默认样式发挥作用，这是最快速的修复方式。
• 如果移除后还有细微错位，可以检查一下是否有自定义CSS给按钮或输入框加了额外的margin、padding或者height，确保它们的盒模型属性一致（比如都用Bootstrap默认的34px高度）。

修改后的代码如下：

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label>
  <div class="col-md-9 col-sm-7 col-xs-12">
    <div class="input-group input-file">
      <span class="input-group-btn">
        <button class="btn btn-info btn-choose" type="button">Choose</button>
      </span>
      <input type="text" class="form-control" id="Pic" placeholder='Choose a file...' />
      <span class="input-group-btn">
        <button class="btn btn-danger btn-reset" type="button">Reset</button>
      </span>
    </div>
  </div>
</div>

这样调整后，文本框和按钮应该就能完美对齐啦！

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