如何使用bootstrap解决水平标签问题

Answer 1

问题出在 col-sm-{number}，因此请更改代码的这一部分：

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-2">Last Name</label>
      <div class="col-sm-10">
        <input
          type="text"
          class="form-control"
          id="lname"
          placeholder="Last name"
        />
      </div>
    </div>
  </div>

对此：

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2">
        Last Name
      </label>
      <div class="col-sm-7 pl-0">
        <input
          type="text"
          class="form-control"
          id="lname"
          placeholder="Last name"
        />
      </div>
    </div>
  </div>

我修改了这一行，每个输入和他的标签必须像这样匹配：

      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2">

      <div class="col-sm-7 pl-0">

这是您修改的所有代码：

<div class="container">
<h2 class="mt32">Bootstrap 4 Horizontal Form</h2>

<form class="mt32" action="#">
<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-4 pl-1 p-0 mt-2">
      First Name</label>
      <div class="col-sm-8 pl-0">
        <input
          type="text"
          class="form-control"
          id="fname"
          placeholder="First name"
        />
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2">
        Last Name
      </label>
      <div class="col-sm-7 pl-0">
        <input
          type="text"
          class="form-control"
          id="lname"
          placeholder="Last name"
        />
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-4 pl-1 p-0 mt-2"
        >Sports</label
      >
      <div class="col-sm-8 pl-0">
        <input
          type="text"
          class="form-control"
          id="sportsname"
          placeholder="Sports name"
        />
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2"
        >School Name</label
      >
      <div class="col-sm-7 pl-0">
        <input
          type="text"
          class="form-control"
          id="sname"
          placeholder="Shcool name"
        />
      </div>
    </div>
  </div>
</div>