html - 如何在 Bootstrap 中使用网格系统对齐 Bootstrap 输入和标签？

Question

我正在创建一个由多个输入字段组成的表单，我正在使用 Bootstrap 4 Grid 系统对齐它们，但在对齐某些输入字段时遇到问题。

片段

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
      <label for="usr" class="col-lg-2 text-primary ">Company Name
					:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container">
      <div class="input-group mt">
        <label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-3 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-3 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-3 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
        <input type="text" class="col-lg-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
        <label for="usr" class="col-lg-2 text-primary ">Selling Price
					:</label> <input type="text" class="col-lg-3 form-control ">
      </div>
    </div>
    <br>
  </div>
</form>

在小屏幕上显示完美，但在大屏幕上字段未正确对齐。

我想达到的目标是:

我想使用 Bootstrap 4 创建一个更漂亮的 UI。但我的首要任务是在每个设备上正确对齐字段

Answer 1

添加以下样式

.container .input-group {
  align-items: center;
}

.container .input-group label {
  margin: 0;
}

同时保留一个与下拉菜单类似的“成本价”和“公司 ID”的不可见按钮，以便您的字段正确对齐。

<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>

.container .input-group {
  align-items: center;
}

.container .input-group label {
  margin: 0;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
      <label for="usr" class="col-lg-2 text-primary ">Company Name
					:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
          
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container">
      <div class="input-group mt">
        <label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-3 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-3 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-3 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
        <input type="text" class="col-lg-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Selling Price
					:</label> <input type="text" class="col-lg-3 form-control ">
      </div>
    </div>
    <br>
  </div>
</form>