nzForm 布局被打乱

nz-form 布局被打乱的原因
  1. 表单样式使用行内：[nzLayout]="'inline'"
  2. 表单中使用多中类型的控件（input、datepicker、select...）

    会出现日期选择控件没有充满，同时 select 控件会被挤到下一行，看看下面的效果

使用官方的样式类设置统一宽度解决

  • 在模板对应的CSS中使用下面的样式设置统一宽度

    /* 通过设置下面两个样式的宽度解决 nz-select 打乱 form 布局的问题*//* nz-form-control 外围类 */.ant-form-item-control-wrapper{    width: 152.16px;}/* nz-form-item 样式类*/.ant-form-item{    width: 221.2px;}
  • 设置后的效果是：
其他解决方法
  • 实际不该使用inline模式，而应该使用horizontal模式，一个 nz-form-item 中放置4个 label 和 control
  • 因为一个 nz-form-item 是一行