響應式語義用戶界面響應網格，列，行

我無法使語義UI React網格完全響應，至少響應我對桌面，平板電腦和移動設備的需求。響應式語義用戶界面響應網格，列，行

我有以下三個組件在Grid Columns中渲染。

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則在下面堆疊。

View組件 Tablet View of Component

理想情況下，我想進喬布斯從桌面將平板大小時，從平板要移動時留在屏幕上，已訂閱之上，下面的工作和底部的文章。

任何幫助是讚賞如何讓這個網格迴應這樣。

來源

2017-08-29 Generaldeep

有人嗎？任何指導表示讚賞。即使我使用CSS框架，是否必須指定媒體查詢？或者是否有解決我的網站以響應不同設備的問題？ – Generaldeep

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>

來源

2017-08-30 06:28:17

響應式語義用戶界面響應網格，列，行

回答

相關問題