如何对齐Bootstrap表单的输入字段和标签？
我正在使用bootstrap-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> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
在小型设备上，输出很好，但是在大型设备上，我面临以下问题：
- 我将4个标签和输入字段对齐为一行，但是输入字段在UI上看起来很小，因为标签和输入字段之间的空间很大
- 标题为“公司ID和名称”的我想对它们进行补偿，以便它们出现在大屏幕的中央
- 我有一些带有一些输入字段的下拉菜单；没有下拉菜单的输入字段我想全角显示，就像它们在小型设备上一样
我要进行的更改
我希望带有下拉菜单的输入字段不只是下拉菜单
4 个答案:
答案 0 :(得分：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>
，如果需要，您可以添加占位符。
答案 1 :(得分：1)
为了使输入更大，我更改了列大小。我将所有col-lg-2更改为col-lg-1，并将所有col-lg-4更改为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> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
答案 2 :(得分：1)
正如我在注释部分中讨论的关于顶部对齐的内容一样，我对第一行的代码做了一些更改，如果您愿意进行其他更改，则将其注释掉。
<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;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<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;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<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-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<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-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">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 " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">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 " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">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 " style="padding-top: 8px;">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> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
浏览器上的相同代码在小屏幕上为我提供了完美的文本框。
答案 3 :(得分：1)
我之前answered a similar question。如您所见，在 all 标签上设置特定的col宽度并不合适，因为它们的宽度不同。
对此有几种不同的解决方法，包括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>
演示：https://www.codeply.com/go/GJ0Puh9pWd
注意：请勿在同一元素中同时使用row和container-fluid。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？