在大屏幕上,导航栏可以显示更多的菜单项,而在小屏幕上,菜单项可以折叠成一个汉堡按钮。 <el-row type="flex" justify="space-between"> <el-col :span="4">Logo</el-col> <el-col :span="20" class="nav-items"> <el-row type="flex" justify="end"> <el-col :span="4">Home</el-col> <...
type:设置行的布局方式,默认为"default",可设置为"flex"以实现更灵活的布局。 justify:设置行内列的水平对齐方式,如"start"、"end"、"center"、"space-between"等。 align:设置行内列的垂直对齐方式,如"top"、"middle"、"bottom"等。 el-col的属性: span:设置列所占的栅格数,默认为24,取值范围为1-24。
可以多个 el-col 位居一行时使用 type - justify 通过设置type="flex",启动 flex 布局,通过 justify 的属性调整排版方式 justify 属性值: center 居中对齐 start 左对齐 end 右对齐 space-around / space-between / space-evenly 建立在 el-row 横向还有空间的前提下,24 份已满就不会有效果 <el-row type=...
row组件的type="flex"启动flex布局,再通过row组件的justify属性调整排版方式,属性值分别有: justify=center 居中对齐 justify=start 左对齐 justify=end 右对齐 justify=space-between 空格间距在中间对齐 justify=space-around 左右各占半格空格对齐 1 <el-row type="flex" class="row-bg" justify="center"> 2 ...
{ "property": "justify", "label": { "text": { "zh_CN": "justify" } }, "description": { "zh_CN": "flex 布局下的水平排列方式" }, "cols": 12, "labelPosition": "top", "type": "string", "defaultValue": "start", "widget": { "component": "MetaSelect", "props": { "...
row组件的type="flex"启动flex布局,再通过row组件的justify属性调整排版方式,属性值分别有: justify=center 居中对齐 justify=start 左对齐 justify=end 右对齐 justify=space-between 空格间距在中间对齐 justify=space-around 左右各占半格空格对齐 1<el-row type="flex"class="row-bg"justify="center">2<el-co...