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

news2024/11/23 22:07:41

  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.coloradmin.cn/o/2077060.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【MySQL】MySQL 表的增删改查(进阶)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 约束类型 not null 非空 unique 唯一 default 指定默认值 primary key 主键 foreign key 外键 check字句 检查 表设计 确定实体 实体之间的关系 聚合查询 聚合函数…

基于SSM的学生信息管理系统的设计与实现 (含源码+sql+视频导入教程+文档+VISIO图)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的学生信息管理系统12拥有三种角色&#xff1a;学生、教师、管理员 学生&#xff1a;选课、查看已选课程、查看成绩 教师&#xff1a;成绩管理 管理员&#xff1a;课程管理、学生…

ai变声:视频怎么变音?分享6个语音变声器,视频变声不再难!

想过如何让自己的直播内容更吸引人吗&#xff1f;你是否希望通过变声器来打造独特的声音效果&#xff1f;或者&#xff0c;如何用创意声音提升观众的互动体验呢&#xff1f;随着直播行业的不断发展&#xff0c;每位主播都在努力寻找吸引观众的独特方式&#xff0c;而变声器正是…

【电脑使用耳机录音注意事项】

文章目录 电脑音设置 电脑音设置 打开声音设置&#xff1a;右键小喇叭 → 选择“声音(S)”→选择 “录制”&#xff1a; 选择 “阵列麦克风” 调整声音大小&#xff1a; 音频增强设置

AI大模型编写多线程并发框架(六十二):限流和并发度优化

系列文章目录 文章目录 系列文章目录前言一、项目背景二、第三轮对话-补充异步执行代码三、第四轮对话-增加限流器四、第五轮对话-抽取限流器接口五、第六轮对话-修改并发度三、参考文章 前言 在这个充满技术创新的时代&#xff0c;AI大模型正成为开发者们的新宠。它们可以帮助…

何为MethodHandles?

最近在梳理ThreadPoolExecutor&#xff0c;无意间看到其内部类Worker实现了一个名字叫做AbstractQueuedSynchronizer的抽象类。看到它&#xff0c;我便想起当年为了面试而疯狂学习这个知识点的场景。不过这种临时抱佛脚的行为&#xff0c;并未给我带来即时的收益。也是这次的疯…

基于Java的高校学生工作系统的设计与实现(论文+源码)_kaic

基于Java的高校学生工作系统的设计与实现(论文源码)_kaic 摘 要 本系统为高校学生工作管理系统&#xff0c;系统能够为高校提供便捷的学生信息管理功能。该系统采用 Java 语言编写&#xff0c;系统采用MVC架构进行设计&#xff0c;通过Servlet和JSP等技术实现前后端数据交互和…

【漏洞复现】SuiteCRM responseEntryPoint Sql注入漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

基于UDS的Flash 刷写——BootLoad刷写流程详解

从0开始学习CANoe使用 从0开始学习车载测试 相信时间的力量 星光不负赶路者&#xff0c;时光不负有心人。 目录 流程概述UDS流程详解释前编程①诊断会话控制 - 切换到扩展会话&#xff08;10 03&#xff09;②例程控制-预编程条件检查&#xff08;31 01 02 03&#xff09;③DTC…

ClickHouse分布式部署搭建单分片二副本集群

搭建单分片二副本集群,使用MergeTree引擎测试数据同步 服务器: 127.0.0.1 clickhouse 127.0.0.2 clickhouse + keeper 结构图 1.修改hosts vi /etc/hosts 添加需要部署的ip和名字 127.0.0.1 node1 127.0.0.2 node2 2. node1配置文件修改 2.1 修改/etc/clickhouse-se…

Excel中使用VBS自定义函数将中文转为拼音首字母

1、在“开发工具”中&#xff0c;点击“Visual Basic”。如果没有“开发工具”&#xff0c;则添加。 2、添加“模块”&#xff0c;在窗口中添加自定义函数。 Function MyGetPYChar(char) MyCodeNumber 65536 Asc(char) If (MyCodeNumber > 45217 And MyCodeNumber <…

【网络安全】缓存配置错误导致授权绕过

未经许可,不得转载。 文章目录 正文复现正文 一个电子商务网站,它有 2 个资产:target.com和admin.target.com target.com是面向用户的门户,用户可以去那里购买物品。admin.target.com是卖家的管理门户,卖家可以在其中列出他们的物品,跟踪订单、客户信息等。 我正在测试…

有希带你深入理解指针(3)

前言 本篇文章是对指针知识的进一步讲解&#xff0c;如果对部分知识有不了解的地方可以移步前文进行学习&#xff01; 1.字符指针变量 该内容我们在前面的文章中已提到过&#xff0c;想必大家对它应该不陌生吧&#xff01;这里我们会对它进行详细的介绍。 一般情况下&#xf…

FPGA开发——IIC实现简单的串口回环

一、概述 在我们进行日常开发时&#xff0c;不管是进行MCU、单片机、还是FPGA&#xff0c;都会使用到IIC通信协议。采用串行总线可以简化系统硬件结构、减小系统体积、提高系统可靠性。常 用的串行总线有单总线&#xff08;1-Wire Bus&#xff09;、IIC&#xff08;Inter-Integ…

Codeforces Round 926 (Div. 2) C. Sasha and the Casino (博弈论*1400)

这里的意思是想让我们求得是否是能够实现不停地无上限的赚钱。 这里注意避开一个思维误区&#xff0c;如果你想的是前x次一直用1枚硬币然后吃第x1次保底&#xff0c;那么就是错误的。你应该考虑到如果前x次里面出现了胜利呢&#xff1f;这时候你拿着一枚硬币根本赚不回本。 所…

全志H616系统启动和登录

一、系统启动 刷完机烧入镜像&#xff0c;直接用MobaXterm软件串口登陆 约定固定的波特率115200。 默认登录&#xff1a; 用户&#xff1a;orangepi 密码&#xff1a;orangepi 或用户&#xff1a;root 密码&#xff1a;orangepi 在输入密码时…

YOLO 单目测距:原理、方法与代码

一、原理 单目测距的一个常见方法是假设物体的尺寸已知。通过测量物体在图像中的高度&#xff08;或宽度&#xff09;&#xff0c;并结合物体的实际高度&#xff08;或宽度&#xff09;&#xff0c;最简单的一种方式就是利用相似三角形的原理来计算物体的距离。 二、相似三角…

使用深度学习来进行击剑动作识别的裁判工作

在击剑比赛中&#xff0c;当双方几乎同时击中对方时&#xff0c;记分板两边都会亮起。这时裁判需要决定哪一方得分。一般而言&#xff0c;谁更主动或控制了局势就会得分。我尝试训练了一个模型来辅助裁判做这样的判断&#xff01;目前该模型在花剑测试集上的准确率大约为60%&am…

Vue开发者工具安装详细教程

欢迎大家订阅【Vue2Vue3】入门到实践 专栏&#xff0c;开启你的 Vue 学习之旅&#xff01; 文章目录 前言一、下载二、安装三、调试 前言 Vue 是一个框架&#xff0c;也是一个生态&#xff0c;其功能覆盖了大部分前端开发常见的需求。本文详细讲解了 Vue 开发者工具的安装。 …

ES7.17.5 float类型 terms带来的隐患

背景 1.用户在mapping中加一个字段 testid&#xff0c;结果写数据的时候使用 testId&#xff0c;同时也没有strict限制动态mapping&#xff0c;只是使用了默认的 true&#xff0c;即允许动态生成mapping 2.动态生成的字段 testId 被识别成了 float&#xff0c;用户为了方便&a…