antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题

formLayout 不起作用

Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应:

	// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal',
	const formLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
  --------------------------------------------------------------------------        
		<Form layout="horizontal" {...formLayout }>
			<Row>
				<Col span={6}>
					<Form.Item label="xxx">
						<Select>
							....
						</Select>
					</Form.Item>
				</Col>
				<Col span={6}>
					<Form.Item label="xxx">
							<Select>
								....
							</Select>
						</Form.Item>
				</Col>
            </Row>
		</Form>
		
	//方法2 给 Form.Item 手动设置宽度
	<Form layout="inline" {...formLayout }>
					<Form.Item label="xxx" style={{width:'25%'}}> //百分比
						<Select>
							....
						</Select>
					</Form.Item>
					<Form.Item label="xxx" style={{width:'200px'}}>// 固定宽度
							<Select>
								....
							</Select>
						</Form.Item>
		</Form>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值