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.mzph.cn/diannao/52539.shtml

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

相关文章

【数据结构】二叉树的顺序结构,详细介绍堆以及堆的实现,堆排序

目录 1. 二叉树的顺序结构 2. 堆的概念及结构 3. 堆的实现 3.1 堆的结构 3.2 堆的初始化 3.3 堆的插入 3.4 堆的删除 3.5 获取堆顶数据 3.6 堆的判空 3.7 堆的数据个数 3.8 堆的销毁 4. 堆的应用 4.1 堆排序 4.1.1 向下调整建堆的时间复杂度 4.1.2 向上调整建…

GPT-4o System Card is released

GPT-4o System Card is released, including red teaming, frontier risk evaluations, and other key practices for industrial-strength Large Language Models. https://openai.com/index/gpt-4o-system-card/ 报告链接 企业级生成式人工智能LLM大模型技术、算法及案例实战…

MSSQLILABS靶场通关攻略

判断注入 首先用单双引号判断是否存在注入&#xff0c;这里可以看到是单引号 判断是否为 MSSQL 数据库 可以通过以下Payload来探测当前站点是否是MSSQL数据库&#xff0c;正常执行说明后台数据库为MSSQL&#xff1b;也可以根据页面的报错信息来判断数据库 and exists( select…

基于pygame的雷电战机小游戏

import pygame import sys import random# 初始化 Pygame pygame.init()# 设置窗口尺寸 WIDTH, HEIGHT 800, 600 screen pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption("雷电战机")# 设置颜色 BLACK (0, 0, 0) RED (255, 0, 0) GREEN (…

对于现货白银走势图分析,不是单纯为了回报

投资白银选对工具和产品真的很重要。如果投资者选择的是实物银条&#xff0c;或者纸白银等相对低效的投资方式&#xff0c;收益只能跟随白银的价格涨跌&#xff0c;比如今年以来&#xff0c;国际白银价格上涨了大概30%&#xff0c;投资者的收益就顶多只有30%&#xff0c;万一买…

[数据集][目标检测]道路积水检测数据集VOC+YOLO格式2699张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2699 标注数量(xml文件个数)&#xff1a;2699 标注数量(txt文件个数)&#xff1a;2699 标注…

redis实战——go-redis的使用与redis基础数据类型的使用场景(一)

一.go-redis的安装与快速开始 这里操作redis数据库&#xff0c;我们选用go-redis这一第三方库来操作&#xff0c;首先是三方库的下载&#xff0c;我们可以执行下面这个命令&#xff1a; go get github.com/redis/go-redis/v9最后我们尝试一下连接本机的redis数据库&#xff0…

如何在Java Maven项目中使用JUnit 5进行测试

如何在Java Maven项目中使用JUnit 5进行测试 1. 简介 JUnit 5概述 JUnit是Java编程语言中最流行的测试框架之一。JUnit 5是JUnit的最新版本&#xff0c;它引入了许多新特性和改进&#xff0c;使得编写和运行测试更加灵活和强大。 为什么选择JUnit 5 JUnit 5不仅提供了更强…

设计模式反模式:UML图示常见误用案例分析

第一章 引言 1.1 设计模式与反模式概述 在软件开发领域&#xff0c;设计模式与反模式是两种截然不同的概念&#xff0c;它们在软件设计过程中起着至关重要的作用。设计模式是经过验证的最佳实践&#xff0c;用于解决在特定上下文中经常出现的问题&#xff0c;从而提高软件的可…

《黑神话·悟空》是用什么编程语言开发的?

最近火爆全球的国产 3A 大作《黑神话悟空》&#xff0c;你玩了吗&#xff1f;没玩没关系&#xff0c;有人就是对游戏不感冒&#xff0c;我找了个宣发片&#xff0c;一起感受下3A大作的视觉冲击&#xff0c;而且还是我们从小听到大&#xff0c;那猴子&#x1f412;的故事。 ‌‌…

【Linux】自动化构建工具makefile

目录 背景 makefile简单编写 .PHONY makefile中常用选项 makefile的自动推导 背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 ​ ◉ 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…

Scrapy 项目部署Scrapyd

什么是Scrapyd Scrapyd 是一个用来管理和运行 Scrapy 爬虫的服务。它允许用户将 Scrapy 项目部署到服务器上&#xff0c;然后通过一个简单的 API 来启动、停止和监控爬虫的运行。Scrapyd 可以帮助简化爬虫的部署过程&#xff0c;使得用户不必手动在服务器上运行爬虫&#xff0c…

【测试】JMeter从入门到进阶

本文参考 Jmeter自动化测试工具从入门到进阶6小时搞定&#xff0c;适合手工测试同学学习_哔哩哔哩_bilibili JMeter介绍 JMeter 是 Apache 组织使用 Java 开发的一款测试工具&#xff1a; 1、可以用于对服务器、网络或对象模拟巨大的负载 2、通过创建带有断言的脚本来验证程序…

9个最流行的文本转语音引擎【TTS 2024】

在快速发展的技术世界中&#xff0c;文本转语音 (TTS) 引擎正在取得显著进步。从增强各种应用程序中的用户体验到创建逼真且引起情感共鸣的语音输出&#xff0c;TTS 引擎正变得不可或缺。在这里&#xff0c;我们介绍了 2024 年为行业树立新标准的九款最佳 TTS 引擎。 NSDT工具推…

应用层协议(上)Http(URL、Cookie、Session)内含逻辑图解通俗易懂!

绪论​ “少年没有乌托邦 心向远方自明朗”&#xff0c;本章是应用层常用且重要的协议htttp&#xff0c;没看过应用层建议一定先看那一篇后再看本章才能更好的去从上到下的理解应用层。 话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑观看&#xff09;。 1.Http协…

Mac移动硬盘选什么格式最好 Mac怎么用ntfs移动硬盘

在使用Mac电脑的过程中&#xff0c;很多用户可能有需要扩展存储空间的需求。选择合适的移动硬盘格式对于数据传输的效率和兼容性至关重要。本文将详细介绍Mac移动硬盘选什么格式好&#xff0c;以及Mac怎么用ntfs移动硬盘&#xff0c;帮助用户优化Mac的使用体验。 一、Mac移动硬…

悬浮翻译工具有哪些?工作学习必备的5款悬浮翻译工具

当我们身处异国他乡&#xff0c;或是工作中遇到多语种交流的需求时&#xff0c;语言障碍往往会成为一道难以逾越的高墙。 不过&#xff0c;在这个充满创新的时代里&#xff0c;技术已经为我们准备好了答案——屏幕翻译器app。它们不仅能够即时翻译屏幕上的文字&#xff0c;还能…

电脑回收站清空了怎么恢复?

在日常使用电脑的过程中&#xff0c;不小心清空回收站导致重要文件丢失的情况时有发生。面对这种情况&#xff0c;我们不必过于慌张&#xff0c;因为有多种方法可以尝试恢复被清空的文件。本文将为您详细介绍几种有效的恢复方法&#xff0c;帮助您找回宝贵的文件。 方法一&…

芯片后端之 PT 使用 report_timing 产生报告 之 -nets 选项

今天,我们再学习一点点 后仿真相关技能。 那就是,了解 report_timing 中的 -nets 选项 。 如果我们仅仅使用如下命令,执行后会发现: pt_shell> report_timing -from FF1/CK -to FF2/d -delay_type max 我们使用命令 report_timing 报出的如上路径延时信息,仅仅显示…

Maven的一些相关知识【重修】《包括私服搭建!》

mvnrepository.com Maven 下载jar包的位置&#xff01; 【该部分有教程】 这是什么nb代码投稿视频-这是什么nb代码视频分享-哔哩哔哩视频 MAVEN 的私服搭建&#xff1a; https://zhuanlan.zhihu.com/p/520107316 2、maven私服搭建及应用&#xff08;下&#xff09;_哔哩…