Responsive Semantic UI React Grid, Spalten, Zeilen

Question

Ich habe Probleme, Semantic UI React Grid voll reaktionsfähig zu machen, zumindest so reagieren, wie ich für Desktop, Tablet und Mobile will.

Ich habe folgende drei Komponenten, die ich in Rasterspalten rendere.

Die Spalten werden ordnungsgemäß gestapelt, wenn Sie von Desktop zu Mobile wechseln. Es geht von 3 bis 1 Spalte. Bei der Tablet-Größe werden die 3 Spalten jedoch dichter angebracht, anstatt 2 Spalten auf dem Bildschirm zu haben, und 1 wird darunter gestapelt.

View Component Tablet View of Component

Idealerweise würde ich Futter und Jobs wie auf dem Bildschirm zu bleiben, wenn vom Desktop bis zum Tablet wird, zurück, und wenn sie von Tablet Mobile gehen, haben auf Futtermittel, Jobs unten und Artikel unten.

Jede Hilfe wird geschätzt, wie dieses Gitter so reagieren kann.

Answer 1

stackable Stützen Sie die Stützen nur auf dem mobilen Gerät zusammen, für die genaue Kontrolle der Breiten auf verschiedenen Geräten sollten Sie responsive Stützen verwenden. Sie können auch versuchen, mit only und reversed zu spielen. Ich habe ein Beispiel gemacht, das zeigt, wie man das macht.

<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>