Bootstrap 4 表单 - Bootstrap 4 基础教程

Bootstrap 表单元素 <input>,<textarea>, 和 <select> 元素如果添加了 .form-control 则宽度都是 100%

Bootstrap 4 提供了两种形式的表单布局

堆叠表单 (全屏宽度)：垂直方向
内联表单：水平方向

堆叠表单

堆叠表单是默认的表单布局方式

<form>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">密码</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> 记住我
    </label>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

运行范例 »

内联表单

内联表单就是所有的表单元素都在同一哈昂

Bootstrap 中所有内联表单中的元素都是左对齐的

Bootstrap 内联表单会在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于 576px 时表单元素才会显示在同一个水平线上

内联表单需要在 <form> 元素上添加 .form-inline

<form class="form-inline">
  <label for="email">邮箱</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">密码</label>
  <input type="password" class="form-control" id="pwd">
  <button type="submit" class="btn btn-primary">登录</button>
</form>

运行范例 »