Bootstrap 4复选框未正确对齐

Question

我有一个表单，里面有几个输入字段和一个复选框

• 我正在尝试将输入字段排成一行，但是没有发生
• 我正在对齐输入字段旁边的复选框
• 我想以某种方式对齐，以使它在我使用引导程序时在每台设备上看起来都很好
• 我正在使用class=form-control，但仍无法获得完美的对齐

代码段

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container form-group">
  <form id="changePasswordForm">

    <div class="row">
      <div class="col-lg-3">
        <label for="distributorName" id="commonHeader">Distributor
						Name:</label>
        <select id="distributorName" class="form-control test">

        </select>
      </div>

      <div class="col-lg-3">
        <label for="userCode" id="commonHeader">User Code:</label> <input type="text" id="userCode" name="usercode" class="form-control commonClass" placeholder="user Code" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <label for="userName" id="commonHeader">Name of the User:</label> <input type="text" id="userName" name="userName" class="form-control commonClass" placeholder="User Name">
      </div>
      <div class="col-lg-3">
        <label for="loginId" id="commonHeader">login Id:</label> <input type="text" id="loginId" name="loginid" class="form-control commonClass" placeholder="Login Id">
      </div>
      <div class="col-lg-3">
        <label for="Pass" id="commonHeader">Password:</label> <input type="password" id="Pass" name="pass" class="form-control commonClass" placeholder="Password" required="required">
        <button type="button" class="eye-button" onclick="show('newPass')" id="display1">
						<i class="fa fa-eye"></i>
					</button>

      </div>
      <div class="col-lg-3">
        <label for="userRole" id="commonHeader">Role</label>
        <select id="userRole" class="form-control test">

        </select>
      </div>
      <div class="col-lg-3">
        <label for="checkbox" id="commonHeader">Active
							</label> <input type="checkbox" id="active" class="form-control commonClass">

      </div>

    </div>
    <div>
      <hr>

      <button type="submit" id="save" class="commonButton">
						<i class="fa fa-save"></i>save
					</button>
    </div>
  </form>
</div>

Answer 1

您将输入字段的宽度设置为100％，请尝试将display属性更改为如下所示的block。 （d块）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container form-group">
  <form id="changePasswordForm">
    <div class="row">
      <div class="col-lg-3">
        <label for="distributorName" id="commonHeader">Distributor Name:</label>
        <select id="distributorName" class="form-control test">
        </select>
      </div>
      <div class="col-lg-3">
        <label for="userCode" id="commonHeader">User Code:</label> 
        <input type="text" id="userCode" name="usercode" class="form-control commonClass" placeholder="user Code" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <label for="userName" id="commonHeader">Name of the User:</label> 
        <input type="text" id="userName" name="userName" class="form-control commonClass" placeholder="User Name">
      </div>
      <div class="col-lg-3">
        <label for="loginId" id="commonHeader">login Id:</label> 
        <input type="text" id="loginId" name="loginid" class="form-control commonClass" placeholder="Login Id">
      </div>
      <div class="col-lg-3">
        <label for="Pass" id="commonHeader">Password:</label> 
        <input type="password" id="Pass" name="pass" class="form-control commonClass" placeholder="Password" required="required">
        <button type="button" class="eye-button" onclick="show('newPass')" id="display1">
          <i class="fa fa-eye"></i>
        </button>
      </div>
      <div class="col-lg-3">
        <label for="userRole" id="commonHeader">Role</label>
        <select id="userRole" class="form-control test">
        </select>
      </div>
      <div class="col-lg-3">
        <label for="checkbox" id="commonHeader">
          Active
        </label> 
        <input type="checkbox" id="active" class="d-block">
      </div>
    </div>
    <div>
      <hr>
      <button type="submit" id="save" class="commonButton">
        <i class="fa fa-save"></i>save
      </button>
    </div>
  </form>
</div>