前言

这篇文章给小伙伴们说的是在使用element这个UI库的时候，它里面有Layout 布局，但是如果没有自己设置的话，它只能分为24的因数，就比如3、4、6这种布局，但是我们在开发的时候，还会碰到5或者7这样的布局，那么就很头痛了。我想很多小伙伴应该和我一样，输入4.8，但是这是没有用的，那么今天我来给大家站展示一下怎么解决5栏布局的问题

1、原理讲解

先随手写一个普通的4栏布局，进入控制台，大家会发现

然后就比较清晰了思路，我们会发现:span="6"，到控制台中的class就是el-col-6，那它的样式就是.el-col-6 { width: 25%; }，这就已经很明了了，我们只要自己创建一个class名字，然后在调用就可以了。

2、代码截图

这里我是新创建了一个25，因为它这个布局是按照24来分的，所以我就选择24以外的数字来进行命名，名字是可以随便起的，你只要别取那些自带的就可以，比如3、4、6、8这些数，也不是说不能取，你把区域的问题梳理好就可以随便起，我个人的习惯还是5栏就是25，7栏就是27，这样直接就在css初始化中就写好了，以后也不会想这个东西了，需要了就直接可以用，还是很方便的。
接下来我们看一下在浏览器上的最终展示

结语

这个东西虽然很简单，但是对于刚使用element的小伙伴肯定还是要花点时间去解决的，希望刷到我这篇文章的时候，可以认真的看一下，非常的使用，提高写代码的效率。
希望这篇文章可以对你有所帮助。

element中设置5栏布局相关推荐

iOS中设置导航栏标题( titleView)的字体颜色和大小
在iOS中,经常会对一些导航栏titleView进行自定义,首先介绍一下对navgationBar 上的title设置的三种方法: <1> self.title = @"我是ti ...
wps中复制公式到另一个文档变成图片，wps怎么调整公式的高度，wps在一页中设置一栏和两栏
目录 wps中ppt 去除水印 ppt 去除水印 wps实现字符全部替换 wps分两列出现乱列
网页设计中分栏布局的几种实现方案
在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局.这其中又以部分栏固定,部分栏自适应的方式最为常见.下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案. 三栏布局三栏布局最常 ...
CSS3属性之多栏布局column
文将针对CSS 3中的多栏布局做详细介绍,使用多栏布局时只能为所有栏指定一个统一的高度,栏与栏之间的宽度不可能是不一样的,另外也不可能具体指定什么栏中显示什么内容,因此比较适合使用在显示文章内容的时候 ...
LATEX——两张图并列排列/双栏模板中图片通栏并列布局
LATEX--两张图并列排列/双栏模板中图片通栏并列布局正常插入图片并列插入两张图片双栏模板中图片通栏并列布局1(不同图片使用不同标题,不同编号) 双栏模板中图片通栏并列布局2(不同图片使有不同 ...
【Android 插件化】Hook 插件化框架 ( 合并 “插件包“ 与 “宿主“ 中的 Element[] dexElements | 设置合并后的 Element[] 数组 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
android线程改变布局,Android线程中设置控件的值提示报错的解决方法
本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.y ...
电脑中的语言栏设置，有什么方法？
方法一: 右击任务栏空白处-工具栏-语言栏即可. 方法二: 首先打开文字服务 1. 单击开始,单击控制面板,然后双击"区域和语言选项". 2. 在语言选项卡上的"文字服 ...

element中设置5栏布局

前言

1、原理讲解

2、代码截图

结语

element中设置5栏布局相关推荐

最新文章

热门文章