如何使用 Bootstrap 在不同的行中编写表单？

为了使表单在不同的行中展示，Bootstrap 提供了一些类似“row”和“form-group”的类。

基本的表单

以下是基本的表单：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email 地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入您的电子邮件地址">
    <small id="emailHelp" class="form-text text-muted">我们绝不会与任何人分享您的电子邮件地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的密码">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

把表单放在不同的行中

要将表单放在不同的行中，您需要使用包含表单组的 <div class="row"> 元素。每个表单组都需要一个 <div class="col"> 元素，以便将其包含在与其他表单组分离的单独列中。以下是一个例子：

<form>
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="exampleInputEmail1">Email 地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入您的电子邮件地址">
        <small id="emailHelp" class="form-text text-muted">我们绝不会与任何人分享您的电子邮件地址。</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的密码">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">记住我</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

额外的提示

• 使用 <label> 元素来描述输入字段。
• 使用 <small> 标签或 aria-describedby 属性提供附加说明或文本。
• <input> 标签总是需要 class="form-control" 类。
• 使用 type="email" 和 type="password" 属性来改变输入类型。
• 使用 class="form-check-input" 类来创建复选框和单选按钮。
• 使用 class="form-check-label" 类来标记复选框和单选按钮。
• 使用 type="submit" 属性来创建提交按钮。

希望这些提示对你有帮助！