时间戳

首页 > 解决方案 > 如何在引导文本框和标签中设计没有空格

html - 如何在引导文本框和标签中设计没有空格

问题描述

我需要一些前端方面的帮助。我有下面的图片，我想在引导程序中设计如下图所示的表格，但是在引导程序中如何做到这一点，请帮助检查我下面的 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>

我想要这样 我想要这样

我的引导程序 在此处输入图像描述

标签： htmltwitter-bootstrapcsstwitter-bootstrap-3

解决方案

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

推荐阅读