反应语义UI - 移动视图marginRight

Question

我使用react semantic ui作为一个小型Web应用程序，heroku react create app buildpack。

出于某种原因，我总是在流体容器的右边获得一个边距。 Chrome的检查员看不到正文，页面或任何其他元素的边距。

请参阅附图。

我如何摆脱这个？

这是我的代码：

import React from 'react';
import MainMenu from '../../components/menu';
import * from '../../components/search/searchComponents';
import {Button, Container, Image, Item, Label, Responsive, Segment} from 'semantic-ui-react';


/*START TESTDATA*/
const data= [
]
/*END TESTDATA*/

export default class Search extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            searchType: undefined,
            searchResults: [],
            showSearchResultDetails: false,
            mainSearchStyleHeight: 'calc(100vh - 40px)',
            mainSearchStylePTop: 'calc(33vh - 40px)',
            mainSearchStyleTransition: undefined,
        };
    }

    searchButtonHandleOnClick(){
        this.setState({
            mainSearchStyleHeight: '100%',
            mainSearchStylePTop: '2rem',
            mainSearchStylePBottom: '2rem',
            mainSearchStyleTransition: 'height: 1s ease-in',
            searchResults: dishes
        })
    }
    handleSearchResultOnClick(item){
        this.setState({showSearchResultDetails: true})
    }
    render() {
        /*TODO: add css transition here*/
        var mainSearchStyle = {
            height: this.state.mainSearchStyleHeight,
            paddingTop: this.state.mainSearchStylePTop,
            paddingBottom: this.state.mainSearchStylePBottom,
            transition: this.state.mainSearchStyleTransition
        }
        const searchBtn = <Button basic icon="search" content="Suchen" onClick={this.searchButtonHandleOnClick.bind(this)}/>
        return (
            <div>
                <MainMenu/>
                <Container fluid id="mainSearch" style={mainSearchStyle}>
                    <Container>
                        <Responsive as={Segment} minWidth={768} raised padded="very">
                            <SearchByAttr/>
                            <div className="txt-center mt-2">
                                {searchBtn}
                            </div>
                        </Responsive>
                        <Responsive maxWidth={767} className="pt-3 pb-3">
                            <SearchByAttr/>
                            <div className="txt-center mt-2">
                                {searchBtn}
                            </div>
                        </Responsive>
                    </Container>
                </Container>

                <Container id="mainSearchResults" className="p-1">
                    {/*TODO: move this to search components*/}
                    <Item.Group divided>
                        {this.state.searchResults.length > 0 && this.state.searchResults.map(item=>(
                            <Item key={item.name}>
                                <Image
                                    size="small"
                                    src='http://via.placeholder.com/300x250'
                                    label={{ color: 'blue', content: '4,90 Euro', icon: 'spoon', ribbon: true }}
                                />
                                <Item.Content>
                                    <Item.Header as='a' onClick={this.handleSearchResultOnClick.bind(this, item)}>
                                        {item.name}
                                        </Item.Header>
                                    <Item.Meta>
                                        <span className='cinema'>
                                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                        </span>
                                    </Item.Meta>
                                    <Item.Description>
                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                                        sed diam voluptua.
                                    </Item.Description>
                                    <Item.Extra>
                                        <Label content='vegan' />
                                        <Label content='laktosefrei' />
                                        <Label content='low carb' />
                                    </Item.Extra>
                                </Item.Content>
                            </Item>
                        ))}
                    </Item.Group>

                </Container>
                <SearchResultDetails
                    open={this.state.showSearchResultDetails}
                    onClose={()=>this.setState({showSearchResultDetails: false})}
                />
            </div>
        );
    }
};

Answer 1

猜猜。看起来它不是响应容器。整个页面都在左边，包括菜单。所以问题可能在这个组件之外。

尝试渲染Hello以查看。

render() {
    return <div>Hello</div>
}