如何在 element ui el-col 中让元素在超过 24 格时仍保持在一行？
Element UI 的 el-col 组件限制总跨度（span）为 24。若超过这个限制，元素会自动换行。不过，我们可以通过自定义实现，让元素在超过 24 格时也保持在一行中。
自定义解决方案：
实现此功能需要自定义 CSS 样式和 JavaScript 处理。
1. CSS 样式：
.el-row--custom {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}这个样式取消了 el-row 的默认换行功能，强制所有元素在一行中排列。
2. JavaScript 处理：
我们可以在组件挂载后，使用 JavaScript 计算元素的宽度。如果总宽度超过容器宽度（假设为 960px），则将 el-row 组件自定义样式类名添加到容器上。
mounted() {
const containerWidth = 960;
let totalWidth = 0;
this.$nextTick(() => {
const children = this.$el.children;
for (let i = 0; i < children.length; i++) {
totalWidth += children[i].offsetWidth;
}
if (totalWidth > containerWidth) {
this.$el.classList.add('el-row--custom');
}
});
}应用自定义解决方案：
在 Vue 组件中，将 el-row 组件替换为具有自定义样式类的自定义组件。
... ... ...
注意：此解决方案仅适用于 flex 布局支持的浏览器。
