Element-Plus中Row含单Col同行、双Col换行显示问题咨询

可能的原因及对应解决方案 #

1. Col的栅格跨度总和超出24列 #

Element-Plus栅格系统基于24列布局，若两个Col的span属性值之和大于24，第二个Col会自动换行。比如设置<Col span="16">和<Col span="10">，16+10=26>24，必然触发换行。

解决方法：
调整两个Col的span值，确保总和≤24。示例：

<Row>
  <Col span="12">区块1</Col>
  <Col span="12">区块2</Col>
</Row>

2. Row的gutter间距导致总宽度溢出 #

当Row设置了gutter属性时，会给每个Col添加左右内边距（padding），若两个Col的宽度加上gutter的总宽度超过Row所在容器的宽度，就会触发换行。比如容器宽度为1000px，Row gutter=40，两个Col各占50%，实际总宽度为500px*2 + 40px = 1040px，超出容器宽度导致换行。

解决方法：

• 减小gutter值，或确保Col的宽度计算后加上gutter不超过容器；
• 给Row添加flex-wrap: nowrap样式强制不换行（需注意内容可能溢出容器）：

<Row style="flex-wrap: nowrap;" gutter="20">
  <Col span="12">区块1</Col>
  <Col span="12">区块2</Col>
</Row>

3. Col内部内容撑开宽度 #

若Col内的内容（如长文本、固定宽度元素）宽度超过Col的可用空间，会导致Col被强制撑开，两个Col总宽度超过Row容器后换行。

解决方法：
给Col内部的内容添加宽度限制，避免撑开Col：

<Row>
  <Col span="12">
    <div style="width: 100%; overflow: hidden; text-overflow: ellipsis;">
      超长内容超长内容超长内容超长内容超长内容
    </div>
  </Col>
  <Col span="12">
    <div style="width: 100%; box-sizing: border-box;">
      <img src="xxx.png" style="width: 100%;" />
    </div>
  </Col>
</Row>

4. 响应式断点配置导致换行 #

若给Col设置了响应式span（如xs/sm等断点），在小屏幕下可能触发Col占满整行（span=24），导致换行。比如<Col :span="12" :xs="24">，在屏幕宽度<768px时，每个Col会单独占一行。

解决方法：
检查响应式配置，根据需求调整断点对应的span值。例如不需要小屏幕换行的话，将xs的span设为12：

<Row>
  <Col :span="12" :xs="12">区块1</Col>
  <Col :span="12" :xs="12">区块2</Col>
</Row>

内容的提问来源于stack exchange，提问作者f17ang