web-dev-qa-db-ja.com

レスポンシブセマンティックUI Reactグリッド、列、行

セマンティックUIの作成に問題がありますReactグリッドが完全に応答します。少なくとも、デスクトップ、タブレット、およびモバイルで希望する方法で応答します。

グリッド列でレンダリングしている次の3つのコンポーネントがあります。

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列になります。ただし、タブレットサイズでは、画面に2つの列があり、1つが下に積み重ねられるのではなく、3つの列がぴったりとフィットします。

View ComponentTablet View of Component

理想的には、デスクトップからタブレットサイズに移行するとき、およびタブレットからモバイルに移行するとき、フィードとジョブを画面に表示したままにし、フィードを上に、ジョブを下に、記事を下に配置します。

このグリッドをこのように応答させる方法について、どんな助けもありがたいです。

cssresponsive-designgridresponsivenesssemantic-ui-react
9
Generaldeep

stackable propは、モバイルデバイスでのみ列を折りたたみます。異なるデバイスで幅を正確に制御するには、 sensitive 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>
24
Oleksandr Fediashov