Флажок 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, как показано ниже.(д-блок)

<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>