css - 响应式语义 UI React 网格、列、行

Question

我在使 Semantic UI React 网格完全响应时遇到问题，至少以我想要的方式响应桌面、平板电脑和移动设备。

我在网格列中呈现以下三个组件。

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Grid, Header } from 'semantic-ui-react'
import GetJobs from '../../components/Home/GetJobs';
import PostForm from '../../components/Home/PostForm';
import Feed from '../../components/Home/Feed';
import Articles from '../../components/Home/Articles';
import './home.css'

class Home extends Component {
  render() {
    return(
      <Grid id="home" stackable columns={3}>
        <Grid.Row>
          <Grid.Column>
            <Header>Articles</Header>
            <Articles/>
          </Grid.Column>
          <Grid.Column>
            <Feed/>
          </Grid.Column>
          <Grid.Column>
            <Header>Jobs</Header>
            <GetJobs/>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

export default Home;

从桌面转到移动设备时，列会正确堆叠。它从 3 列变为 1 列。然而，在平板电脑尺寸下，3 列只是更紧密地贴合，而不是屏幕上有 2 列，1 列堆叠在下方。

查看组件 Tablet View of Component

理想情况下，当从台式机尺寸变为平板电脑尺寸时，我希望 Feed 和 Jobs 留在屏幕上，而当从平板电脑尺寸变为移动设备时，Feed 位于顶部，Jobs 位于下方，而 Articles 位于底部。

感谢任何有关如何让这个网格做出这样的响应的帮助。

Answer 1

stackable prop 仅在移动设备上折叠列，为了在不同设备上精确控制宽度，您应该使用 responsive Prop 。您也可以尝试玩 only和 reversed .我做了一个示例来说明如何执行此操作。

<Grid>
  <Grid.Column only='computer' computer={5}>
    <Header>Articles</Header>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <Feed/>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <GetJobs/>
  </Grid.Column>
  <Grid.Column only='mobile tablet' mobile={16} tablet={16}>
    <Header>Articles</Header>
  </Grid.Column>
</Grid>