nzForm 布局被打乱

nz-form 布局被打乱的原因
  1. 表单样式使用行内:[nzLayout]="'inline'"
  2. 表单中使用多中类型的控件(inputdatepickerselect...)

    会出现日期选择控件没有充满,同时 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个 labelcontrol
  • 因为一个 nz-form-item 是一行

葬天尘
360 声望7 粉丝