Question

我遇到了将CSS gutters添加到Semantic-UI网格的挑战。我有一个Grid列，其中一个段被重复渲染这是我的代码。

#include <stdio.h>
#include <fcntl.h>
#include <io.h>

int main(void)  
{  
    int result;  

    // Set "stdin" to have binary mode:  
    result = _setmode(_fileno(stdin), _O_BINARY);  
    if (result == -1)
        perror("Cannot set mode");  
    else  
        printf("'stdin' successfully changed to binary mode\n");  
}

这是呈现细分的代码

import React from 'react';
import ReactDOM from 'react-dom';
import { Segment, Grid, Image as ImageComponent, Item, Button } from 'semantic-ui-react'

export default class TeachersListSegment extends React.Component {
  render() {
    return (
        <div>
          <Grid.Column mobile={16} tablet={8} computer={8} largeScreen={8} widescreen={8}>
            <Segment stacked padded color='blue'>
              <Grid>
                <Grid.Row>
                  <Grid.Column width={11}>
                    <Item.Group link>
                      <Item>
                        <Item.Image size='tiny' src='https://semantic-ui.com/images/avatar/large/steve.jpg' />

                          <Item.Content>
                            <Item.Header><a>{this.props.header}</a></Item.Header>
                              <Item.Description>{this.props.description}</Item.Description>
                                 <Item.Description>Another Description</Item.Description>
                                  </Item.Content>
                                </Item>
                              </Item.Group>
                      </Grid.Column>
                      <Grid.Column width={5}>
                        <Button positive className="mb-3 teachers-list-button">Book Lesson</Button>
                        <Button basic color="green" className="teachers-list-button">Send Message</Button> 
                      </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
            </Grid.Column>
        </div>
    );
  }
}

显示屏目前看起来像这样。在显示屏上添加色谱柱间隙和行间隙的有效方法是什么？我在上面的链接中应用了阴沟样式但是没有用。 This question还帮助我应用正确的代码，使其具有移动响应能力。

有关应用列和行间隙的解决方案的任何建议吗？谢谢你的帮助。

Answer 1

您可以向所有column添加课程<TeachersListSegment>，并将其全部包装在<div class="ui two column stackable grid"> </div>中。

如果有帮助，请告诉我。

具有React语义UI的响应段布局

1 个答案: