我无法使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放在首位,将作业放在下面,将文章放在底部.
如何让这个网格响应这样的任何帮助表示赞赏.
解决方法
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>
