响应式语义 UI React 网格、列、行答案

【问题标题】：Responsive Semantic UI React Grid, Columns, Rows响应式语义 UI React 网格、列、行
【发布时间】：2017-08-30 14:28:17
【问题描述】：

我无法让 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 位于底部。

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

【问题讨论】：

有人吗？任何指导表示赞赏。即使我使用的是 CSS 框架，我是否必须指定媒体查询？还是有办法让我的网站响应不同的设备？

标签： css responsive-design grid responsiveness semantic-ui-react

【解决方案1】：

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

【讨论】：