如何在非移动端断点下响应式堆叠Semantic-UI网格行内的两等宽列？

嘿，我明白你的需求：电脑端显示等宽两列，到平板尺寸就自动堆叠成单列。你已经用了stackable网格，但可能需要调整响应式宽度的断点来精准控制。这里给你两种实现方式，都是Semantic-UI-React的标准写法：

简洁版（推荐） #

直接给列设置不同尺寸下的宽度，不用重复写列组件：

import { Grid, Segment, Image } from 'semantic-ui-react';

const ResponsiveTwoColumn = () => (
  {/* 启用stackable，让网格在窄屏自动堆叠 */}
  <Grid stackable columns={2}>
    <Grid.Row>
      {/* 电脑端占8格（等宽两列），平板/移动端占满16格（单列） */}
      <Grid.Column computer={8} tablet={16} mobile={16}>
        <Segment>
          <Image src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" />
        </Segment>
      </Grid.Column>
      <Grid.Column computer={8} tablet={16} mobile={16}>
        <Segment>
          <Image src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" />
        </Segment>
      </Grid.Column>
    </Grid.Row>
  </Grid>
);

export default ResponsiveTwoColumn;

更灵活的拆分写法（适合复杂内容） #

如果你的两列在不同尺寸下内容有差异，可以用only属性拆分不同尺寸的列：

<Grid stackable>
  <Grid.Row>
    {/* 仅电脑端显示的等宽列 */}
    <Grid.Column width={8} only="computer">
      <Segment>
        <Image src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" />
      </Segment>
    </Grid.Column>
    {/* 平板/移动端显示的单列 */}
    <Grid.Column width={16} only="tablet mobile">
      <Segment>
        <Image src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" />
      </Segment>
    </Grid.Column>

    {/* 第二列同理 */}
    <Grid.Column width={8} only="computer">
      <Segment>
        <Image src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" />
      </Segment>
    </Grid.Column>
    <Grid.Column width={16} only="tablet mobile">
      <Segment>
        <Image src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" />
      </Segment>
    </Grid.Column>
  </Grid.Row>
</Grid>

关键细节说明 #

• stackable属性是核心，它让网格在列宽度占满16格时自动堆叠
• computer={8}：电脑屏幕（≥992px）时，每列占8格，刚好等宽两列（Semantic UI网格总16格）
• tablet={16}：平板屏幕（768px-991px）时，每列占满整个网格宽度，自然变成单列
• 如果你不需要区分平板和移动端，只写computer={8} tablet={16}也可以，移动端会继承tablet的设置

为啥你的原有代码可能没生效？ #

你原来的HTML里写了eight wide computer sixteen wide mobile sixteen wide tablet column，但Semantic UI的stackable默认堆叠断点是移动端，如果你的平板尺寸还没触发堆叠，大概率是因为列在平板时虽然设了16宽，但需要确保stackable属性正确生效，或者用上面的响应式属性写法更直观可控。

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