nzForm 布局被打乱

nz-form 布局被打乱的原因

1. 表单样式使用行内：[nzLayout]="'inline'"

2. 表单中使用多中类型的控件（input、datepicker、select...）

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

inline模式下form控件布局被打乱.png

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

• 在模板对应的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模式下form为控件设置统一宽度.png

其他解决方法

• 实际不该使用inline模式，而应该使用horizontal模式，一个 nz-form-item 中放置4个 label 和 control
• 因为一个 nz-form-item 是一行