layui栅格布局设置列间距不起作用

  layui栅格布局支持设置列间距,只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。
  根据layui官网文档的说明,只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示:

在这里插入图片描述
  但是实际使用时,一般会在行所在div元素中设置行背景色,此时设置列间距就看不出效果。html示例如下所示(示例代码取自参考文献1),将背景样式放在行所在div元素或者每列所在div元素的效果一样,都看不出间距。

<div class="layui-container">             <div class="layui-row layui-col-space10" style="background-color: red;"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >移动:6/12 | 平板:6/12 | 桌面:4/12</div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4">移动:6/12 | 平板:6/12 | 桌面:4/12</div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4">移动:4/12 | 平板:12/12 | 桌面:4/12</div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8">移动:4/12 | 平板:7/12 | 桌面:8/12</div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4">移动:4/12 | 平板:5/12 | 桌面:4/12</div></div>
</div>

在这里插入图片描述

  百度出来的文章(参考文献2-3)给出的解释是layui的间距样式设置采用的是padding(向内缩)在行div或列div上设置背景色会使整行或当前行的列区域全部显示背景色,向内缩的话不会有什么区别。正确的方式是将列内容再用div包一层,同时设置该层div的背景色,这样就能看出列间距效果。如下所示:

<div class="layui-container">    <div class="layui-row layui-col-space10"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" ><div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div></div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4"><div  style="background-color: red;">移动:4/12 | 平板:12/12 | 桌面:4/12</div></div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8"><div  style="background-color: red;">移动:4/12 | 平板:7/12 | 桌面:8/12</div></div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4"><div  style="background-color: red;">移动:4/12 | 平板:5/12 | 桌面:4/12</div></div></div></div>

在这里插入图片描述
  同时在行、列、内容上设置背景色时的效果如下所示:

<div class="layui-container">             <div class="layui-row layui-col-space10" style="background-color: rgb(49, 214, 99);"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"  style="background-color: rgb(47, 15, 207);"><div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><div  style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div></div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4"><div  style="background-color: red;">移动:4/12 | 平板:12/12 | 桌面:4/12</div></div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8"><div  style="background-color: red;">移动:4/12 | 平板:7/12 | 桌面:8/12</div></div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4"><div  style="background-color: red;">移动:4/12 | 平板:5/12 | 桌面:4/12</div></div></div></div>

在这里插入图片描述

参考文献:
[1]https://www.layui1.com/doc/index.html
[2]https://blog.csdn.net/qq_40943363/article/details/118052587
[3]https://www.jb51.net/article/264158.htm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/412398.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024 年顶级 Flutter UI 框架和库

根据 2022 年 StackOverflow 调查显示&#xff0c;Flutter 是最受欢迎的跨平台工具之一。自发布以来的 16 个月内&#xff0c;已有超过 200 万开发者采用了 Flutter。在本博客中&#xff0c;我们将浏览 GitHub 上可用的顶级 Flutter 存储库。除了每个存储库之外&#xff0c;还提…

Navicat Lite导入为SQL,然后到服务器的SQLServer Management 里执行时,报各种错误,是文件的Encoding不一致导致的解决

1、好多时候&#xff0c;本地的操作系统与服务器的操作系统不一致&#xff0c;有的时候也是历史原因&#xff0c;我们不得不用老旧的版本的数据库&#xff0c;比如 SQLServer 2008R2的数据库系统。 2、然后本地因为操作系统是win11的&#xff0c;导致这个SQLServer 2008R2根本…

萤石云 C++ SDK使用指南

今天继续指南系列&#xff0c;给出了萤石云QtDemo配置使用以及sdk开发中常见问题的指南 SDK下载 一、demo使用配置 1、demo环境配置 Demo 所使用Qt SDK版本&#xff1a;Qt4.8.5 Demo两种开发模式&#xff1a; 下载Qt Creator for Windows&#xff0c;使用Qt Creator作为I…

USR-DR134有人网关如何对接到ThingsPanel

本指南将帮助您使用有人口红串口服务器USR-DR134/USR-DR132将断路器接入ThingsPanel平台。这款创新的超小体积导轨式单串口服务器能够实现RS485/RS232转以太网的双向透传功能&#xff0c;是连接断路器与物联网平台的理想选择。 设备介绍&#xff1a; 口红串口服务器USR-DR134…

解析 uni-app 小程序分包策略:合理优化包体积分布

引言 微信小程序的流行使得越来越多的开发者投入到小程序的开发中。但是&#xff0c;随着项目规模的增大&#xff0c;小程序的性能也会面临一些挑战。其中&#xff0c;小程序分包策略是提升性能的重要一环。 同时&#xff0c;uni-app 的流行也使众多的移动端开发者选择使用 u…

零基础入门转录组数据分析——单基因ROC分析

零基础入门转录组数据分析——单基因ROC分析 目录 零基础入门转录组数据分析——单基因ROC分析1. ROC分析的基础知识2. 单基因ROC分析&#xff08;Rstudio&#xff09;——代码实操2. 1 数据处理2. 2 单基因ROC分析2. 3 ROC曲线简单可视化 1. ROC分析的基础知识 1.1 ROC分析是…

如何在忘记密码或 ID 的情况下解锁 iPhone 15

您是否曾经因为忘记了 iPhone 密码而陷入困境&#xff0c;或者您是否多次错误地输入了屏幕时间密码并发现自己被锁定在 iPhone 之外&#xff1f; 被锁定和拒绝访问您的 iPhone 可能很常见&#xff0c;尤其是在您尚未配置 Face ID 的情况下。或者&#xff0c;如果 Face ID 无法正…

在head的style标签中直接添加css样式

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>内嵌样式示例</title> &l…

无人机校企合作:组装、维修、研发全面提升学生技能方好就业

无人机校企合作在组装、维修、研发等方面全面提升学生技能&#xff0c;进而促进学生就业&#xff0c;是一个具有前瞻性和实践性的教育模式。以下是对该合作模式的详细分析&#xff1a; 一、合作背景与意义 随着无人机技术的快速发展和广泛应用&#xff0c;市场对无人机专业人…

用Python在PDF文档中创建动作

PDF格式因其跨平台兼容性和丰富的功能集而成为许多行业中的首选文件格式。其中&#xff0c;PDF中的动作&#xff08;Action&#xff09; 功能尤为突出&#xff0c;它允许开发者嵌入交互式元素&#xff0c;如链接、按钮或是更复杂的脚本&#xff0c;从而显著提升文档的互动性和功…

Apache RocketMQ 中文社区全新升级丨阿里云云原生 7 月产品月报

云原生月度动态 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 趋势热点 &#x1f947; 通义灵码入选 2024 世界人工智能大会最高荣誉「镇…

SprinBoot+Vue超市管理系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

Golang学习笔记-Golang中的锁

同步原语和锁 Golang作为一个原生支持用户态的语言&#xff0c;当提到并发进程&#xff0c;多线程的时候&#xff0c;是离不开锁的&#xff0c;锁是一种并发编程中的同步原语&#xff08;Synchronization Primitives&#xff09;&#xff0c;它能保证多个 Goroutine 在访问同一…

4. kafka消息监控客户端工具

KafkaKing官网地址 : https://github.com/Bronya0/Kafka-King github下载地址 : Releases Bronya0/Kafka-King (github.com) (windows、macos、linux版本) 云盘下载地址 : https://pan.baidu.com/s/1dzxTPYBcNjCTSsLuHc1TZw?pwd276i (仅windows版本) 连接kafka 输入本地地址…

数据分析及应用:如何对试卷得分做min-max归一化处理?

目录 0 问题描述 1 数据准备 2 问题分析 3 小结 0 问题描述 现有试卷信息表examination_info(exam_id试卷ID, tag试卷类别, difficulty试卷难度, duration考试时长, release_time发布时间): 试卷作答记录表exam_record(uid用户ID, exam_id试卷ID, start_time开始作答时…

H5手机端调起支付宝app支付

1.调起APP页面如下 步骤 1.让后端对接一下以下文档&#xff08;手机网站支付通过alipays协议唤起支付宝APP&#xff09; https://opendocs.alipay.com/open/203/107091?pathHash45006f4f&refapi 2.后端接口会返回一个form提交表单 html&#xff1a;在页面中定义一个d…

【FRP 内网穿透】

文章目录 一、什么叫内网穿透1、内网穿透技术的描述2、内网穿透技术的工作方式通常包括以下几个步骤 二、用内网穿透解决了什么问题三、常见的内网穿透解决方式1、FRP &#xff08;开源&#xff09;2、花生壳&#xff08;商业&#xff09;3、ZeroTier&#xff08;开源 商业&…

用Python绘制历史K线数据

历史K线数据是指股票或指数在特定时间段内的价格变化记录&#xff0c;通常包括开盘价、最高价、最低价、收盘价以及成交量等信息。K线图是一种常用的图形表示方法&#xff0c;用于描述股票市场的价格波动&#xff0c;它由一系列的柱状图组成&#xff0c;每个柱状图&#xff08;…

[ACP云计算]易错题(原题)

ECS 1、 2、 3、 4、 5、 6、 7、 8、 9、 10、 11、 12、 13、 14、 15、 16、 17、 18、 19、 20、 21、 22、 23、 24、 25、 26、 27、 28、 29、 30、 31、 32、 33、 34、 35、 36、 37、 对象存储OSS 1、 2、 3、 4、 5、 6、 重点&#xff01;&#xff01;&#xff…

本地部署一个WordPress博客结合内网穿透实现异地远程访问本地站点

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…