Bootstrap 3表单设计问题：按钮对齐与间距调整求助

嘿，我来帮你搞定这两个表单问题！咱们一步步来拆解：

问题1：按钮未正确对齐 #

你的按钮之所以没对齐，是因为它们被嵌套在包含两个col-md-2的form-group里，打乱了Bootstrap的网格布局逻辑。咱们调整DOM结构，让按钮和上方的输入框遵循同一层级的网格规则就能解决。

问题2：按钮之间的间距 #

Bootstrap 3没有像新版本那样内置的间距工具类，不过咱们可以用简单的内联样式或者自定义CSS来轻松添加间距。

修改后的完整代码 #

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <!-- 调整row内结构，让按钮和输入框处于同一网格层级 -->
  <div class="row">
    <div class="col-md-2 form-group">
      <label for="textbox1">Phone No</label>
      <input class="form-control" id="textbox1" type="text" />
    </div>
    <div class="col-md-2 form-group">
      <label for="textbox2">Post Code</label>
      <input class="form-control" id="textbox2" type="text" />
    </div>
    <!-- 用col-md-8容纳按钮，保证和上方输入框对齐 -->
    <div class="col-md-8 form-group">
      <!-- 给第一个按钮加margin-right实现间距 -->
      <button type="submit" class="btn btn-primary" style="margin-right: 10px;">Submit</button>
      <button type="reset" class="btn btn-primary" value="Reset">Reset</button>
    </div>
  </div>
</form>

额外优化建议 #

如果你不想用内联样式，也可以自定义一个CSS类来统一管理按钮间距：

.btn-spacing {
  margin-right: 10px;
}

然后把Submit按钮的class改成btn btn-primary btn-spacing，这样代码会更整洁易维护。

这样修改后，按钮会和上方的电话、邮编输入框完美对齐，两个按钮之间也有了合适的间距啦！

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