我需要一些前端方面的帮助。我有下面的图片我想在 bootstrap 中设计如下图所示的表单但是在 bootstrap 中如何做到这一点请帮助检查我下面的 html。
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
最佳答案
需要使用此 CSS 和 HTML 进行更新。它是响应式的,因此您可以正确检查。我希望这对你有帮助。
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
input{
width:100px;
}
label{
padding:5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<form class="form-inline">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name" >
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</form>
</div>
关于html - 如何在没有空间的 Bootstrap 文本框和标签中设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51592418/