14

我无法使 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 组件视图

理想情况下，我希望在从台式机到平板电脑大小以及从平板电脑到移动设备时，Feed 和 Jobs 留在屏幕上，Feed 位于顶部，Jobs 位于下方，Articles 位于底部。

对于如何让这个网格做出这样的响应，我们将不胜感激。

4

1 回答 1

40

stackableprop 仅在移动设备上折叠列，为了精确控制不同设备上的宽度，您应该使用响应式道具。您也可以尝试使用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>
于 2017-08-30T06:28:17.467 回答