Отзывчивый семантический пользовательский интерфейс React Grid, Columns, Rows

У меня возникли проблемы с тем, чтобы сетка 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 внизу.

Просмотр компонента Просмотр компонента на планшете

В идеале, я бы хотел, чтобы Лента и Вакансии оставались на экране при переходе с рабочего стола на размер планшета, а при переходе с планшета на мобильный, чтобы Лента была вверху, Вакансии внизу, а Статьи внизу.

Приветствуется любая помощь в том, как заставить эту сетку реагировать так.


css responsive-design semantic-ui-react responsiveness grid
person Generaldeep    schedule 29.08.2017    source источник
comment
кто угодно? любые рекомендации приветствуются. Нужно ли указывать медиа-запросы, даже если я использую структуру CSS? или есть обходной путь, чтобы мой сайт реагировал на разные устройства?   -  person Generaldeep    schedule 30.08.2017

Ответы (1)


arrow_upward
39
arrow_downward

stackable prop сворачивает столбцы только на мобильном устройстве, для точного контроля ширины на разных устройствах вы должны использовать отзывчивый реквизит. Вы также можете попробовать поиграть с только и обратный. Я сделал пример, который показывает, как это сделать.

<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>
person Oleksandr Fediashov    schedule 30.08.2017