如何实现复选框与表单元素的底部水平对齐？

这个问题我之前也碰到过，用Bootstrap 3的时候确实容易出现这种表单和复选框对齐的小麻烦，给你几个靠谱的解决办法：

方案一：利用Bootstrap内置布局+自定义垂直对齐样式 #

Bootstrap的form-inline可以让表单元素横向排列，我们只需要给复选框容器添加垂直对齐的样式就能搞定：

修改后的代码： #

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义复选框的垂直对齐 */
    .form-inline .checkbox {
      display: inline-block;
      vertical-align: bottom;
      margin-bottom: 0; /* 去掉默认的底部外边距，避免间距错乱 */
    }
  </style>
</head>
<body>
  <div class="form-inline">
    <div class="form-group">
      <label for="exampleInput">表单输入框</label>
      <input type="text" class="form-control" id="exampleInput" placeholder="请输入内容">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 我是复选框
      </label>
    </div>
  </div>
</body>
</html>

这个方法的核心是给复选框容器设置vertical-align: bottom，让它和旁边的表单元素底部对齐，同时去掉默认的margin-bottom保证布局紧凑。

方案二：用Flexbox实现更灵活的对齐（推荐） #

虽然Bootstrap 3原生不支持Flexbox，但我们可以自己写CSS来利用Flex的强大对齐能力，这种方法适配性更强：

代码示例： #

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .align-bottom-container {
      display: flex;
      align-items: flex-end; /* 让子元素底部对齐 */
      gap: 15px; /* 可选，设置元素之间的间距 */
      padding: 10px;
    }
    .align-bottom-container .form-group {
      margin-bottom: 0; /* 移除表单组默认的底部外边距 */
    }
  </style>
</head>
<body>
  <div class="align-bottom-container">
    <div class="form-group">
      <label for="exampleInput">表单输入框</label>
      <input type="text" class="form-control" id="exampleInput" placeholder="请输入内容">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 我是复选框
      </label>
    </div>
  </div>
</body>
</html>

Flexbox的align-items: flex-end会让所有子元素沿着容器的底部对齐，不管元素高度如何变化，都能保持对齐状态，非常适合响应式场景。

方案三：简单粗暴的margin调整（适合快速临时解决） #

如果你的布局比较简单，也可以直接给复选框容器设置margin-top，手动调整到和表单底部对齐的位置：

.form-inline .checkbox {
  margin-top: 28px; /* 根据你的表单实际高度调整数值 */
}

不过这个方法不够灵活，如果表单高度变化（比如响应式下），就需要重新调整数值，所以只推荐临时用用。

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