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>

我想要这样

我的引导程序

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>

Answer 2

		<html><head>
		  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		  <title></title>
		  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		  <meta name="robots" content="noindex, nofollow">
		  <meta name="googlebot" content="noindex, nofollow">
		  <meta name="viewport" content="width=device-width, initial-scale=1">

		  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
		  <style type="text/css">
			@media (min-width: 768px){
				.form-inline .form-group {
					display: inline-block;
					margin-bottom: 0;
					vertical-align: middle;
					display: inline-flex;
				}
			}
		  </style>
		</head>
		<body>
			<div class="col-md-12 form-inline"> 
					<div class="col-md-2" style="display: inline-flex;">                                    
							<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>
			</div>
		</body>
		</html>

Answer 3

label {
    margin-bottom: .5rem;
    display: contents !important;
}
.form-control {
display: initial !important;
width: auto !important;}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
<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>
</body>
</html>

如何在bootstrap文本框中设计并且没有空间的标签

3 个答案: