如何让 Element UI 的 el-col 在超过 24 span 时保持一行显示？

发布日期： 2024-11-03 阅读量： 作者： 网络

超越 element ui 限制，让 el-col 在超过 24 span 时保持一行显示

你希望 Element UI 的 el-col 超过 24 span 时还能保持在一行显示，并且可以使用浏览器滚动条进行拖动。这是原生组件的限制，但我们可以通过其他方法来实现。

自定义实现

放弃使用 Element UI 的 el-col，自己实现一个类似的功能。你可以使用 CSS Flexbox 或 Grid 来创建自适应布局，使其根据可用空间自动排列元素。例如：

.my-custom-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll; // 添加滚动条
}

.my-custom-col {
  flex: 1 0 8rem; // 设置最小宽度为 8rem
  margin: 0 1rem; // 添加间距
}

# css # vue # 原生组件 # 排列 # overflow

上一篇: python爬虫源码附注解

下一篇: docker容器管理ui有哪些

如何让 Element UI 的 el-col 在超过 24 span 时保持一行显示？

随便看看