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放在首位，将作业放在下面，将文章放在底部。

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

Answer 1

stackable prop仅在移动设备上折叠列，以便精确控制不同设备上的宽度，您应该使用responsive道具。您还可以尝试使用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>

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

1 个答案: