实现表单两列或一列、三列左右对齐

表单样式代码都相同的情况下，其中包含两列布局表单、一列布局、两列布局、三列布局和混合布局，实现不同类型列左右对齐实现界面统一，效果如下图

HTML代码

<div class="panel-body collapse in" id="customerPanel">
  <div class="input-group">
      <label class="input-group-text bitian">姓名</label>
      <div class="colput">
         <input type="text" class="form-control" name="customerName" placeholder="姓名" required>
     </div>
     <label class="input-group-text">入住房号</label>
     <div class="colput">
         <input type="text" class="form-control" name="inRoomNum" placeholder="入住房号">
     </div>
 </div>

 <div class="input-group">
     <label  class="input-group-text bitian">入住协议</label>
     <div class="colput">
         <input type="text" class="form-control" name="agreementNum" placeholder="入住协议" required>
     </div>
     <label class="input-group-text bitian">签单金额</label>
     <div class="colput">
         <input type="text" class="form-control"  name="agreementMoney" placeholder="0.00" required>
     </div>
 </div>
 <div class="input-group">
   <label class="input-group-text">证件地址</label>
         <div class="colput">
             <input type="text" class="form-control" name="idCardAddr" placeholder="证件地址">
         </div>
     </div>

     <div class="input-group">
         <label class="input-group-text">住址</label>
         <div class="colput">
             <input type="text" class="form-control" name="addr" placeholder="住址">
         </div>
     </div>
     <div class="input-group">
	     <label class="input-group-text bitian">家属姓名</label>
	          <div class="colput">
	              <input type="text" class="form-control" name="relation1" placeholder="家属姓名">
	          </div>
	          <label class="input-group-text bitian">家属关系</label>
	          <div class="colput">
	              <input type="text" class="form-control" name="relation1Be" placeholder="家属关系">
	          </div>
	          <label class="input-group-text">联系电话</label>
	          <div class="colput">
	              <input type="text" class="form-control" name="relation1Phone" placeholder="联系电话">
	          </div>
	      </div>
	
	      <div class="input-group">
	          <label class="input-group-text bitian">家属姓名</label>
	          <div class="colput">
	              <input type="text" class="form-control" name="relation2" placeholder="家属姓名">
	          </div>
	          <label class="input-group-text">家属关系</label>
	          <div class="colput">
	              <input type="text" class="form-control" name="relation2Be" placeholder="家属关系">
	          </div>
	          <label class="input-group-text bitian">联系电话</label>
	          <div class="colput">
	              <input type="text" class="form-control" name="relation2Phone" placeholder="联系电话">
	          </div>
	      </div>

CSS样式代码

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group-text{width:120px;}
.input-group{margin-bottom:5px;}
.col_1 .colput{    width:calc(100% - var(--flabel-width));}
.col_2 .colput{width:calc((100% - 260px - 50px) / 2);}
.col_3 .colput{width:calc((100% - 390px - 100px) / 3);}
.input-group-text:not(:first-child){margin-left:50px;}
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

脚本代码

//自动计算表单列，匹配样式，实现表单左右对齐
  $(".input-group").each(function(){
    var labelNum = $(this).find("label.input-group-text").length;

  if (labelNum == 1) {
        $(this).addClass('col_1');
    }else if(labelNum == 2){
        $(this).addClass('col_2');
    }else {
        $(this).addClass('col_3');
    }
})

使用前请先引入jquery.js插件，我是通过each()方法遍历循环DIV为input-group的容器，判断里边label 的个数，从而判断他是属于几列布局的表单，然后添加对应的样式代码实现的，

拓展阅读