[英]How to align a Bootstrap form's input fields and labels?
I am working on bootstrap-4 forms in which I have several input fields and labels. 我正在使用bootstrap-4表单,其中我有几个输入字段和标签。 I have successfully created it, but want to add some features to it so that it looks great UI-wise and is user friendly. 我已经成功创建了它,但是想要为它添加一些功能,以便它在UI方面看起来很棒并且用户友好。
Working Snippet 工作片段
<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>
The output is fine on small devices, but on large devices I am facing the following issues: 小型设备上的输出很好,但在大型设备上,我遇到以下问题:
Changes I am trying to make are 我想要做的改变是
I want input fields with drop-down not as only drop-down 我希望带有下拉列表的输入字段不仅仅是下拉列表
You can do something like this: 你可以这样做:
<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>
and if you want you can add placeholders. 如果您愿意,可以添加占位符。
In order to make the inputs bigger I changed the columns sizes. 为了使输入更大,我改变了列的大小。 All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. 所有col-lg-2我改为col-lg-1,所有col-lg-4改为col-lg-5,输入在更宽的显示器上看起来更加饱满。 Here's a codepen with it. 这是一个带有它的codepen。
<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>
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further. 正如我在关于顶部对齐的评论部分中所讨论的那样,我在第一行的代码中做了一些更改,如果您愿意,则会对其他更改进行评论。
<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>
Same code on browser its giving perfect text box for me on small screen. 浏览器上的代码相同,它在小屏幕上为我提供完美的文本框。
I answered a similar question before. 我之前回答过类似的问题 。 As you can see, setting a specific col width on doesn't work well for all of the labels since they're different widths. 如您所见,设置特定的col宽度对所有标签都不适用,因为它们的宽度不同。
There are several different workarounds for this including CSS grid and table-cell width, but IMO the easiest solution is to use display:table-cell
and a media query so that it's only applied above a specific screen width. 有几种不同的解决方法,包括CSS网格和表格单元宽度,但IMO最简单的解决方案是使用display:table-cell
和媒体查询,以便它仅应用于特定屏幕宽度之上。 You'll also need to clean up the markup using col-form-label
and correctly structured input groups. 您还需要使用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>
Demo: https://www.codeply.com/go/GJ0Puh9pWd 演示: https : //www.codeply.com/go/GJ0Puh9pWd
Note: Don't use row
and container-fluid
together in the same element. 注意:不要在同一元素中一起使用row
和container-fluid
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.