elementui layout（el-row）组件有横向滚动条（gutter）

最新推荐文章于 2024-07-03 08:43:15 发布
最新推荐文章于 2024-07-03 08:43:15 发布
阅读量2.6k 收藏 6
点赞数 5
文章标签： elementui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangbinwangyi/article/details/129946361
版权

问题

<html>
	<body>
		<el-row :gutter="20">
			<el-col :span="12">1</el-col>
			<el-col :span="12">2</el-col>
		</el-row>
	</body>
</html>

当el-row的gutter属性有值的时候，会出现横向滚动条。
plus版本有同样的问题。

解决方案

给el-row组件的任何一级父元素设置一定的padding 或者 margin值，而且该值要大于等于gutter，横向滚动条才能消失。

body {
 padding: 0 20px;
 /* margin: 0 20px; */
}
jiangbinwangyi
关注
[随笔] el-row使用非零 gutter 时宽度溢出出现水平滚动条
zhaoweihao的博客
12-10 7388
在使用 elementUI 的 el-row 标签时，如果设置了 gutter 属性 且不为0，那莪会出现水平滚动条（宽度会溢出） 案例分析 <el-row :gutter="10"> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> &...
elementui//el-form 中 input 框没有对其的原因 el-row 用了 :gutter。改用 &nbsp；
weixin_37877794的博客
09-12 1312
el-form 中 input 框没有对其的原因 el-row 用了 :gutter。改用 &nbsp; 修改后： 不用 :gutter。改用 &nbsp; <el-form-item v-for="(item, index) in form.value" :label="`字典${index + 1}`" :key="item.id" :prop="`value.${$index}`
“el-row 设置非零 gutter 会出现横向滚动条”
CRT本人的博客
07-11 2411
“el-row 设置非零 gutter 会出现横向滚动条”
el-col、el-row设置自动滚动
最新发布
weixin_46939404的博客
07-03 260
el-col、el-row设置自动滚动
el-row的gutter注意事项
weixin_41171651的博客
12-01 2486
注意gutter会使el-row的容器宽度增加20px，在全屏宽度时候可能会导致出现横向滚动条。可在el-row父元素设置。
VUE专题 ElementUI中 row 和 elcol排版+滚动条添加
weixin_44131922的博客
04-18 6535
<Row> //其中row可以写 :span=”24” 默认24 <ElCol :span="12"> </ElCol> <ElCol :span="12"> </ElCol> </Row> 具体效果 row就是代表一行，占用就使用 :span表示，默认24为一行，col自然是列，列的宽度调整也用 :span，排三个列就是 8 8 8 其中可以自己的其他的样式组件，一般用来排列表单 当一行的Row中col占比超过24则会自动挤到下
antd 栅格布局Row使用gutter时出现水平滚动条
u010234868的专栏
06-29 767
或者给父级设置width: 100%;现象：上述代码使用栅格布局页面，Row设置了gutter：40后出现水平滚动条。解决方法：给其父级容器留出足够的padding。
elementui的el-row
08-23
element-ui 是一款基于 Vue.js 的组件库，el-row 是其中的一个布局组件。...2. el-row 的 gutter 属性有什么作用？ 3. 如何使用 offset 属性在 el-col 中创建偏移列？ 4. el-row 和 el-col 组件之间是否可以嵌套使用？
Element-UI 使用el-row 分栏布局的教程
01-18
使用多个卡片显示的时候，并且要求当列数到一定数目... <el gutter=20 class=el-row type=flex> <el span=8 xss=removed key=item.id class=el-col> <el class=el-card key=index xss=removed> <div slot=header
ElementUI源码分析-Row和Col组件
weixin_42991716的博客
06-27 3030
一、简述 ElementUI的row组件和col组件属于里面的layout部分，通过基础的 24 分栏，能快速的创建布局。 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。 二、解读源码 通过参照源码，从新实现了一遍row和col; 三、Row 以下是ElementUI中的源码: export default { name: 'BsRow', // 组件的name componentName: 'BsRow', // 组件名,主要用于会被子
elemnt el-row 宽度溢出修复
qq_42797482的博客
04-07 1907
elemnt el-row 宽度溢出修复 前言 本人小白前端，只用于记录，如有侵权请私信联系 提示：以下是本篇文章正文内容，下面案例可供参考 一、elemnt el-row 宽度溢出修复 二、溢出 1.在使用珊格系统时，如果使用了有分隔的布局也就是将gutter设置为非零时，会使页面宽度溢出出现滚动条破坏了布局美观性 代码如下（示例）： 2.解决方法 代码如下（示例）： //el-row 宽度溢出修复 overflow-x: hidden; padding: 0 30px; box-sizi
el-scrollbar 滚动条
qq_52335038的博客
06-02 3561
解决el-scrollbar 滚动条不生效的办法
el-scrollbar滚动条分析
pscool的博客
03-17 730
现在把box2的宽度该称高跟box2相同的300px，是不会出现滚动条的，但是如果box2里面的元素的宽度大于了box1的宽度，那么box1仍然会出现滚动条，这也就是说，只要box1里面的元素超出了范围，不管是不是直接子元素，都会出现滚动条。为了看懂el-scrollbar的滚动条，先看一个水平滚动条的示例：一个box1里面套了一个box2，其中box2的宽度和box2的宽度相等，这种情况下，box1在水平方向上是没有滚动条的（box1使用了overflow-x:auto）。移动下位置试试，如下。
vue+elementUI el-row和el-col 自动滚动table表格组件封装—基础版
彤先森的博客
01-17 867
vue 自动滚动table表格组件封装—基础版
ElementUI中遇到的问题
jiaweide123的博客
06-06 1159
解决使用ElementUI过程中遇到的问题
Vue -- 使用 element 布局实现页面五等分 & gutter 用法
支棱起来
12-10 6875
<el-row :gutter="20" style="height:100%;margin:5px 3px 0 15px"> <el-col v-for="partData in overviewPartData" :span="4" style="height:100%;padding-left:0px;width:20%"> <div style="border:1px solid #eee;height:100%;background-color:#fff;pad
VUE：指定元素内，鼠标滚轮横向滚动内容，支持平滑滚动
wcdunf的博客
04-27 3565
简介 页面上，有纵向滚动的元素，也有横向滚动的元素。由于纵向滚动是默认的，所以就需要把横向滚动事件区分开来。 具体实现 对需要滚动条（纵向转变为横向）的标签设置个id（避免重复），然后调用如下 setScroolFun 方法（注意元素渲染后调用）。 data () { return { documentObj : null } }, methods: { setScroolFun () { this.documentObj = document.getElemen.
element-ui 栅格布局小坑
m0_55477902的博客
12-06 512
上下两行，上面一行的el-row没有设置gutter，下面一行因为有两列，所以设置了gutter，结果下面一行和上面一行宽度不一致了。解决方案：在设置了gutter的el-row上设置一个padding-right。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值