element栅格5等分

朱雀 2023-07-21 11:03 101阅读 0赞

*  element栅格时基础的 **24** 分栏，实现5等分需要设置百分比
 *  案例

#### 1. 三等分 ####

<el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
    </el-col>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]

#### 2. 四等分 ####

<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    </el-col>

![在这里插入图片描述][20200403142414451.png]

#### 3. 五等分（24无法直接整除）24/5 = 4.8 ####

<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
    </el-col>
    
    ---------------------------------------------------------------------------
    <style> .el-col-lg-4-8 { width: 20%; } </style>

![在这里插入图片描述][20200403142642787.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]: /images/20230528/68c38aa0278e4f38a49f5074e30edc11.png
[20200403142414451.png]: /images/20230528/c2b80ccf6b9a4d83b66548b2287bda1a.png
[20200403142642787.png]: /images/20230528/e025bd95be7f4c368a5ecbe6451a54a1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读

相关 element栅格5等分

element栅格时基础的 24 分栏，实现5等分需要设置百分比案例 1. 三等分 <el-col :xs="12" :sm="12" :lg="

朱雀/ 2023年07月21日 11:03/ 0 赞/ 102 阅读

相关 Bootstrap-栅格系统

Bootstrap-栅格系统 1.栅格系统简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统

不念不忘少年蓝@/ 2023年06月18日 14:52/ 0 赞/ 49 阅读

相关 pyQt 栅格

!/usr/bin/python3 -- coding: utf-8 -- """ ZetCode PyQt5 tutorial

缺乏、安全感/ 2023年06月15日 04:59/ 0 赞/ 51 阅读

相关网页栅格化

栅格系统的设计原理及应用 ![这里写图片描述][20161008193814733] 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间

你的名字/ 2022年07月16日 06:10/ 0 赞/ 171 阅读

相关 Bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 > 一.移动设备优先 > H5项目中，meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问

我不是女神ヾ/ 2022年06月12日 03:59/ 0 赞/ 301 阅读

相关 bootstrap栅格系统

注意：最后加起来是12列 <div class="row"> <div class="col-md-1">.col-md-1</div> <d

川长思鸟来/ 2022年05月28日 11:13/ 0 赞/ 299 阅读

相关 Qt5之栅格布局

1、创建栅格布局对象 // 2018年6月24日 23:22:02 改为栅格布局 gridLayout = new QGridLayout;

灰太狼/ 2022年05月21日 12:26/ 0 赞/ 533 阅读

相关栅格数据裁剪

文章目录使用GDAL命令使用Python代码版权声明：本文为博主原创文章，转载请注明原文出处！写作时间：2019-03-22

缺乏、安全感/ 2022年03月01日 16:14/ 0 赞/ 342 阅读

相关 [ArcGIS] 栅格计算器

> 【规定】`{SQL表达式}`表示此为可选参数（用\{\}标识） > 未完… 文章目录函数常用例子详细说明示例

心已赠人/ 2021年11月05日 17:18/ 0 赞/ 634 阅读

相关 css 栅格系统

父元素容器设置栅格: 内部子元素会按顺序从左往右依次排列在栅格内声明栅格容器 display: grid; 父元素得有

傷城~/ 2021年07月25日 01:15/ 0 赞/ 509 阅读