html - 如何在没有空间的 Bootstrap 文本框和标签中设计

Question

我需要一些前端方面的帮助。我有下面的图片我想在 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>

我想要这样

我的 Bootstrap

Answer 1

需要使用此 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>