时间戳

首页 > 解决方案 > 垂直对齐两列输入字段，一列带标签，另一列不带标签

html - 垂直对齐两列输入字段，一列带标签，另一列不带标签

问题描述

我正在制作发票申请表。现在我在一行中做了五列。每列都有输入字段。第四列和第五列有四个输入字段，但第五列字段没有标签。现在我需要的是使用引导类对齐四列和第五列，而无需任何自定义 CSS。因为我不需要第五列中的标签。花了几个小时后，我不知道如何对齐两列。

html:

      <div class="row">
               <div class="col-sm-3>
                 <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control" id="" 
                     placeholder=""> </div>     
               </div>
               <div class="col-sm-3>
               <!--i am using these four lines code in every col for input fields for sake clarity i wrote it only here.
                  <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control"id="" 
                     placeholder="item desc"> </div>     
               </div>
               <div class="col-sm-3>
                
               </div>
               <!---fourth col-!>
               <div class="col-sm-3>
               </div>
               <!--fifth col--!>
               <div class="col-sm-3>
               <!-I need to align this column with the above column remeber this coloumn field does not have labels thats why I am not able to align both columns(fourth and fifth)-!>
               </div>

            </div>

标签： htmlbootstrap-4

解决方案

使用 mt-2到form-group哪里label是空的。

在此处了解 bootstrap-4 间距：https ://getbootstrap.com/docs/4.0/utilities/spacing/

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
               <div class="col-sm-2">
                 <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control" id="" 
                     placeholder=""> </div>     
               </div>
               <div class="col-sm-2">
                  <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control"id="" 
                     placeholder="item desc"> </div>     
               </div>
                 <div class="col-sm-2">
                 <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control" id="" 
                     placeholder=""> </div>     
               </div>
               <div class="col-sm-2">
                  <div class="form-group  mt-2"> 
                  <label for="inputEmail "></label> 
                  <input type="text" class="form-control"id="" 
                     placeholder="item desc" > </div>     
               </div>
                 <div class="col-sm-2">
                 <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control" id="" 
                     placeholder=""> </div>     
               </div>

                
</div>

推荐阅读