[英]How to distribute form fields evenly using Bootstrap 4?
我一直试图让这些字段分布得更均匀,但我还没有做到:
这是一块:
<div class="row flex-nowrap d-flex align-items-center">
<div style="width: 37%" class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
<option value=""></option>
<option value="review and approve on page recommendations">Review and approve</option>
<option value="review and approve technical seo recommendations">Review</option>
</select></div>
<div style="width: 15%" class="form-group col-sm col-md-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
<div style="width: 10%" class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
<div style="width: 32%" class="form-group col-sm col-md-3"><input type="text" class="form-control" placeholder="Notes"></div>
<div style="width: 7%" class="form-group col-sm col-md-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div>
</div>
这是小提琴
您需要从每列中删除style: width: xx%
,然后将 class col-md-x
设置为每列以使其总和为 12,因此在这种情况下,我使用 4 + 2 + 2 + 3 + 1,更改根据您的需要
我使用col-sm
进行演示
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="row flex-nowrap d-flex align-items-center"> <div class="form-group col-sm-4"> <select class="form-control" id="taskList" placeholder="Pick a task"> <option value=""></option> <option value="review and approve on page recommendations">Review and approve</option> <option value="review and approve technical seo recommendations">Review</option> </select> </div> <div class="form-group col-sm-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div> <div class="form-group col-sm-2"><input type="link" class="form-control" placeholder="Paste a link"></div> <div class="form-group col-sm-3"><input type="text" class="form-control" placeholder="Notes"></div> <div class="form-group col-sm-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.