如何写出一个规整的Form（Overview）

Overview

Here’s a quick example to demonstrate（示范） Bootstrap’s form styles. Keep reading for documentation on required（必须的） classes, form layout, and more.

A Example

• 每个input都有一个label对应.form-control

• 在框下有一个描述文字.form-text

• 一个Bootstrap's style的check input .form-check-input

• 一个Bootstrap's style的btn

        <form>
            <div class="mb-3">
              <label for="input1" class="form-label">Email</label>
              <input type="email" class="form-control" id="input1" 
              aria-describedby="emailHelp">
              <div id="emailHelp" class="form-text">
              We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
              <label for="input2" class="form-label">Password</label>
              <input type="password" class="form-control" id="input2">
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="check1">
              <label class="form-check-label" for="check1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>

Form text

上面的例子演示了在input框下添加描述文字，现在我希望input和text放在同一行，如何实现

**Inline text use typical inline HTML element with nothing more than **.form-text

如何实现行内文字，只需要使用那些行内特性的html标签元素并只标上form-text

• 此处选择直接对div添加.row使其确保一行

• 利用行内标签<span>为其添加描述文字

        <div class="row g-3 align-items-center">
            <div class="col-auto">
              <label for="pwd" class="col-form-label">Password</label>
            </div>
            <div class="col-auto">
              <input type="password" id="pwd" class="form-control" 
              aria-describedby="pwdHelp">
            </div>
            <div class="col-auto">
              <span id="pwdHelp" class="form-text">
                Must be 8-20 characters long.
              </span>
            </div>
        </div>