响应语义UI反应网格,列,行

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在下面堆叠.

查看组件的组件 平板电脑视图

理想情况下,我希望Feed和Jobs在从桌面到平板电脑尺寸时保持在屏幕上,当从平板电脑转到移动设备时,请将Feed放在首位,将作业放在下面,将文章放在底部.

如何让这个网格响应这样的任何帮助表示赞赏.

Answer 1

stackableprop仅在移动设备上折叠列,为了精确控制不同设备上的宽度,您应该使用响应式道具.你也可以尝试只玩和反转.我举了一个例子来说明如何做到这一点.

<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>