我无法使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道具.你也可以试着玩
@L_404_2@和
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>