如何对齐引导表单输入字段和标签？

Question

我的工作中，我有几个输入字段和标签引导-4表格。我已经成功地创建它，但希望一些功能添加到它，使它看起来很大UI明智的和用户友好。

工作片段

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<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-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <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-4 ">
        <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-4 form-control  ">
        <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-4 ">
        <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-fluid">
      <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-4 ">
        <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-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Sub 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-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Unit 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-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Supplier 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-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">GST 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-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-4 ">
        <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 ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-4 ">
        <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-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-4 ">
        <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 ">Box Weight:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
				<i class="fa fa-save"></i>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;Close
			</button>

    <br>
    <br>
  </div>

</form>

输出是在小型设备上很好，但对大型设备我面临以下问题：

我对齐一行4标签和输入框，但输入字段正在寻找非常小的宽度对UI，因为有这么多的标签和输入框之间的空间
这是“公司ID，名称为”标头，我想要让它们出现在大屏幕上的中心，以抵消他们
我有一些下拉菜单与一些输入字段;不具有下拉菜单输入字段我想充分的宽度，因为他们做的小设备

我试图做出改变是

我想下拉不是唯一的下拉输入字段

Answer 1

你可以这样做：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<style>
    .container {
        margin: 5px auto;
        padding: 5px;
        color: #17A2B8;
        font-family: Verdana, Geneva, sans-serif;
    }
    h1 {
        text-align: center;
    }
    .btn, .btn-outline-secondary {
        border-color: #17A2B8;
        background-color: #17A2B8;
        color: #ffffff;
    }
    .btn:hover, .btn-outline-secondary:hover {
        background-color: #ffffff;
        color: #17A2B8;
        border-color: #17A2B8;
    }
    .show > .btn-outline-secondary.dropdown-toggle {
        color: #ffffff;
        background-color: #17A2B8;
        border-color: #17A2B8;
    }
</style>

<div class="container">
    <h1>Form</h1>
    <form>
        <div class="form-row">
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <label for="companyId">Company ID</label>
                <input type="text" class="form-control" id="companyId">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <label for="companyName">Company Name</label>
                <input type="text" class="form-control" id="companyName">
            </div>
        </div>
        <hr>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="itemCode">Item Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Item Code 1</a>
                            <a class="dropdown-item" href="#">Item Code 2</a>
                            <a class="dropdown-item" href="#">Item Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="itemName">Item Name</label>
                <input type="text" class="form-control" id="itemName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="brandCode">Brand Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Brand Code 1</a>
                            <a class="dropdown-item" href="#">Brand Code 2</a>
                            <a class="dropdown-item" href="#">Brand Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="brandName">Brand Name</label>
                <input type="text" class="form-control" id="brandName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="categoryCode">Category Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Category Code 1</a>
                            <a class="dropdown-item" href="#">Category Code 2</a>
                            <a class="dropdown-item" href="#">Category Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="categoryName">Category Name</label>
                <input type="text" class="form-control" id="categoryName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="subCategoryCode">Sub Category Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Sub Category Code 1</a>
                            <a class="dropdown-item" href="#">Sub Category Code 2</a>
                            <a class="dropdown-item" href="#">Sub Category Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="subCategoryName">Sub Category Name</label>
                <input type="text" class="form-control" id="subCategoryName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="unitCode">Unit Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Unit Code 1</a>
                            <a class="dropdown-item" href="#">Unit Code 2</a>
                            <a class="dropdown-item" href="#">Unit Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="unitName">Unit Name</label>
                <input type="text" class="form-control" id="unitName">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="supplierCode">Supplier Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">Supplier Code 1</a>
                            <a class="dropdown-item" href="#">Supplier Code 2</a>
                            <a class="dropdown-item" href="#">Supplier Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="supplierName">Supplier Name</label>
                <input type="text" class="form-control" id="supplierName">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="gstCode">GST Code</label>
                <div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#">GST Code 1</a>
                            <a class="dropdown-item" href="#">GST Code 2</a>
                            <a class="dropdown-item" href="#">GST Code 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="gstPercentage">GST Percentage</label>
                <input type="text" class="form-control" id="gstPercentage">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="sgstPercentage">SGST Percentage</label>
                <input type="text" class="form-control" id="sgstPercentage">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="cgstPercentage">CGST Percentage</label>
                <input type="text" class="form-control" id="cgstPercentage">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="costPrice">Cost Price</label>
                <input type="text" class="form-control" id="costPrice">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="sellingPrice">Selling Price</label>
                <input type="text" class="form-control" id="sellingPrice">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="mrp">MRP</label>
                <input type="text" class="form-control" id="mrp">
            </div>
            <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                <label for="boxWeight">Box Weight</label>
                <input type="text" class="form-control" id="boxWeight">
            </div>
        </div>
        <hr>
        <div class="col-auto my-1">
            <button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
            <button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
            <button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
        </div>
        <hr>
    </form>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

如果你愿意，你可以添加占位符。

Answer 2

为了使投入大，我改变了列大小。所有的COL-LG-2 I改变为COL-LG-1和所有的COL-LG-4 I改变为COL-LG-5和输入找上更宽的显示器更加充分。 Here's a codepen with it.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<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-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container" id="center">
      <div class="input-group ">
        <label class="col-lg-1  text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-1  text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-1 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Sub 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">Unit 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Supplier 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">GST 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-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-5 4">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
        <input type="text" class="col-lg-5 4 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-5 4">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
        <input type="text" class="col-lg-3 3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
                <i class="fa fa-save"></i>&nbsp;Save
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-eraser'></i>&nbsp;Clear
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-window-close'></i>&nbsp;Close
            </button>

    <br>
    <br>
  </div>

</form>

Answer 3

我以前answered a similar question。正如你所看到的，在设置特定的山坳宽度不适合所有的标签，因为它们是不同宽度的工作。

有几种不同的解决方法为这个包括CSS网格和表单元格的宽度，但IMO最简单的解决方法是使用display:table-cell和媒体查询，以便它上面的一个特定的屏幕宽度只适用。你还需要使用col-form-label和结构正确输入组清理标记。

      <div class="form-row align-items-center">
            <label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
            <div class="input-group col-lg col-md-4 align-items-start py-2">
                <input type="text" class="form-control">
                <div class="input-group-append">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
                    <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>
                </div>
            </div>
            ...
      </div>

但是：四联zxsw POI

注意：不要使用https://www.codeply.com/go/GJ0Puh9pWd，并在同一个元素row在一起。

Answer 4

正如我在大约直线的顶注释部分的讨论，我在你的第一行代码做了一些改变，如果你喜欢比继续进行其他的评论。

container-fluid

在浏览器中，我在小屏幕上其给予完美的文本框中输入相同的代码。

如何对齐引导表单输入字段和标签？

问题描述投票：3回答：4

4个回答

最新问题

如何对齐引导表单输入字段和标签？

问题描述 投票：3回答：4

4个回答

最新问题

问题描述投票：3回答：4