首页 > 其他分享 >【Antd】表单调整输入框对齐方式:

【Antd】表单调整输入框对齐方式:

时间:2023-05-17 12:24:28浏览次数:47  
标签:24 span 表单 输入框 sm Antd xs const

const formItemLayout = {
    labelCol: {//左边文字
        xs: { span: 24 },
        sm: { span: 6 },
    },
    wrapperCol: {//右边输入框
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 3,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 0,
        },
    },
};

/////////////////////////////////////////////////

<Form labelAlign='center' {...formItemLayout} >
<Form.Item label="知识库分类" {...tailFormItemLayout}/>
</Form>

 

标签:24,span,表单,输入框,sm,Antd,xs,const
From: https://www.cnblogs.com/Esai-Z/p/17408234.html

相关文章

  • AntDeisgn中checkbox group的使用
    <template><!--弹窗类型选择--><div><a-modal:visible="state.modalAttr.visible"title="规选类型"width="680px"@ok="showModal"@cancel="hideModal"><a-checkbox......
  • 如何优雅的处理 React 表单
    如何优雅的处理React表单HTML表单处理本身是一件比较简单的事情,但是当我们对交互的要求高了之后,他就会变得异常复杂——尤其是在React中使用时,我们不得不创建冗长的代码去维护各种状态。那么有没有什么现成的开源方案可以供我们使用,最终优雅的创建React表单呢?本文不会详......
  • AntDesign的Form表单内容有值但是仍然报请输入的错误
    案例解决方案a-form标签上有:model="formState"a-form-item中的name值和v-model:value对应值保持一致案例<a-form:label-col="labelCol":wrapper-col="wrapperCol"ref="formRef":model="formState">......
  • 基于jeesite如何实现多tab页切换时,对应Form表单进行刷新?
    思路:点击tab切换时,触发form表单的submit请求,从而实现刷新效果1、给tab加id:<liclass="active"><ahref="#tab-1"id="prepareTab"data-toggle="tab">待办事项</a></li>2、增加一个查询按钮,发送submit请求,可以隐藏<buttontype="submit&quo......
  • 表单域(html)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,init......
  • css条件选择器has,给layui必填表单的label增加红色星号
    使用lay-reqtext而不应lay-verify或者lay-verify="required",是为了防止 lay-verify="required|monolog"和lay-verify=“自定义验证规则”(有时候不是必填项,但是填写以后要检查格式)。.layui-form-label:has(+divinput[lay-reqtext]):has条件选择器,括号里是选择条件,+div兄弟元......
  • layui表单验证抽离成单独模块手动调用
    模块名:validateForm可以多个表单一起验证,任何任何一个验证不通过就会返回。使用:varboolResult=validateForm.validate("formId1","formId2",....)模块定义如下:1/**2扩展一个表单手动验证模块3**/45layui.define(['layer','form'],function(expo......
  • 03-Html中的表格和表单
    HTML中的表格和表单HTML中的表格创建一个表格<tableborder=""cellspacing=""cellpadding=""width=""height=""> <caption>表格标题</caption> <tr> <th>Header</th> </tr> <tr&g......
  • 03-Html中的表单
    HTML中的表格和表单HTML中的表单表单是什么对于用户而言是数据的录入和提交的界面对于网站而言获取用户信息的途径---表单的作用创建一个表单<formaction=""method=""name=""></form>form!!!单词不要记错了action:定义表单最终提交的地址method: 设定......
  • 表单的高级应用
    隐藏域:hidden代表当前不需要展现在当前行上,但是需要隐藏起来并发送给后端服务器inputtype=hiddenname=1value=2ps:改字符颜色<pstyle="color:red;">3333</p>只读和禁用:readonly代表不可编辑,只能看(只读)  disabled代表置灰效果且不可编辑(禁用)inputtype=textvalue=123r......