Element-UI的el-col组件在span属性值总和超过24时会自动换行。如果需要强制单行显示并添加水平滚动条，则需要放弃el-row和el-col组件的默认布局，改用Flexbox布局。
核心问题在于el-row组件的默认换行行为。为了解决这个问题，我们将包含el-col组件的容器设置为Flex布局，并禁用换行，从而实现强制单行显示。同时，使用overflow-x: auto属性添加水平滚动条，以便查看超出容器宽度的内容。
以下是一个修改后的代码示例：
在这个例子中，我们移除了el-row组件，并使用一个div作为容器，应用display: flex和overflow-x: auto样式。 el-col组件仍然用于设置列宽，但它们现在在一个Flex容器中水平排列，即使span值总和超过24也不会换行。 添加了.grid-content样式，使内容居中显示，并添加了内边距，使内容更易于阅读。 通过这种方法，可以有效地解决el-col组件span值超过24后强制单行显示并添加水平滚动条的问题。
