337 Star 3.2K Fork 617

Layui Vue/layui-vue

grid布局添加间隔会出现滚动条

待办的
创建于  
2025-05-20 14:35

议题条件

  • 我确认已查阅:http://www.layui-vue.com ,但没有找到相关解决方案。
  • 我确认已在 Issues 中搜索过类似的问题,但没有找到相关解决方案。

版本号

2.22.2

浏览器

Chrome 版本 136.0.7103.114(正式版本) (64 位)

问题类型

功能困惑

问题描述

输入图片说明

lay-row添加space="10"会出现横向滚动条,需要设置样式类
.layui-col-space10 {
margin: 0;
}

演示地址

业务代码

<template>
  <lay-row space="10">
    <lay-col md="8">
      <div class="grid-demo">8</div>
    </lay-col>
    <lay-col md="8">
      <div class="grid-demo">8</div>
    </lay-col>
    <lay-col md="8">
      <div class="grid-demo">8</div>
    </lay-col>
  </lay-row>
</template>

<script setup>

</script>

<style scoped>
.grid-demo {
  line-height: 50px;
  border-radius: 2px;
  text-align: center;
  background-color: var(--global-checked-color);
  color: #fff;
}
</style>

截图补充

友好承诺

  • 我承诺将本着相互尊重、理解和友善的态度进行交流,维护 layui-vue 良好的社区氛围。

评论 (7)

LZ 创建了任务 22天前
4896592 mikochen 1620377897 头像挂件 miko
回复 Jevin 成员
19天前

padding 会增加子元素的实际尺寸,子元素总宽 > 父元素宽度,导致出现了横向滚动条

8012236 cwj8 1705765863 Jevin 成员
回复 miko
19天前
4896592 mikochen 1620377897 头像挂件 miko
回复 Jevin 成员
19天前

为什么没考虑flex+gap实现呢?

8012236 cwj8 1705765863 Jevin 成员
回复 miko
19天前

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(3)
8012236 cwj8 1705765863 4896592 mikochen 1620377897 976942 funkboy 1652835420
TypeScript
1
https://gitee.com/layui-vue/layui-vue.git
git@gitee.com:layui-vue/layui-vue.git
layui-vue
layui-vue
layui-vue

搜索帮助