我正在创建一个包含多个输入字段的表单,我正在使用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。但是我的首要任务是在每个设备上正确对齐字段
答案 0 :(得分: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>
答案 1 :(得分:1)
尝试一下:
<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; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<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">
<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 col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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 col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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 col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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">
<div class="col-lg-2"></div>
<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>