表单样式代码都相同的情况下,其中包含两列布局表单、一列布局、两列布局、三列布局和混合布局,实现不同类型列左右对齐实现界面统一,效果如下图
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 的个数,从而判断他是属于几列布局的表单,然后添加对应的样式代码实现的,