React Semantic UI - モバイルビューのmarginRight

Question

私はをheroku react create app buildpackの小さなWebアプリケーションに使用しています。

何らかの理由で私はいつも流体容器の右側に余白があります。 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

。 Responsiveコンテナに関するものではないように見えます。ページ全体は、メニューを含めて左にあります。この問題はこのコンポーネントの外にある可能性があります。

Helloを表示するだけでみてください。

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