javascript - 使组件在侧边菜单打开时不移动

Question

我是 Web 开发的新手，在使用 Ant design 的侧边菜单组件时遇到了一些困难。

这是一个可折叠的菜单，点击打开它时会移动许多其他组件。

我希望页面上的所有其他元素都保持在同一位置 独立的菜单操作。

这就是侧边菜单组件:

    import React from 'react'
    import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';

    const { Header, Content, Footer, Sider } = Layout;
    const SubMenu = Menu.SubMenu;

    export class SideMenu extends React.Component {

      render() {
        return (
            <Menu
              mode="vertical"
              theme="dark"
              className="side-menu"
            >
              ...
            </Menu>
        )
      }
    }

 Thats my layout component:

import React from 'react'
...
import { Layout, Menu, Icon, Row, Col } from 'antd'

const { Header, Footer, Sider, Content } = Layout

export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { collapsed: true }
  }

  toggle() {
    console.log('click')
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  render() {
    return (
      <Layout className="main-layout">
        <Sider className='sider'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="app-logo" id="logo">
            <img src="images/logo.png" alt="Augecon_Logo" height="30" width="30"/>
          </div>
          <SideMenu />
        </Sider>
        <Layout>
          <Header className="app-header">
            <Row justify="center" align="middle">
              <Col span={3}>
                <Icon
                  className="app-trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle.bind(this)}
                />
              </Col>
              <Col span={10} push={10}>
                <div className="app-info" >Sexta feira 12/01/2018 - 17:58 | Daniel Oliveira</div> <!--This item moves-->
              </Col>
              <Col span={3} push={8}>
                <UserAvatar/><!--This item moves-->
              </Col>
            </Row>
          </Header>
            <Content className="app-background" >
              <div className="div-background">
                <div>
                  <img src="images/sagic.png" alt="sagic" className="img-title" center center fixed/> <!--This item moves-->
                </div>
                <Row type="flex" gutter={32} justify="space-around" className="row-card"> <!--This item moves-->
                  <Col span={7} push={1}>
                    <CardSuporte/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardSugestoes/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardLoja/>
                  </Col>
                </Row>
              </div>
            </Content>
        </Layout>
      </Layout>
    )
  }
}

那是我的布局组件:

import React from 'react'
import { SideMenu } from './sidemenu.js'
import { UserAvatar} from './avatar.js'
import { CardSuporte} from './cardsuporte.js'
import { CardSugestoes} from './cardsugestoes.js'
import { CardLoja} from './cardloja.js'
import { Layout, Menu, Icon, Row, Col } from 'antd'

const { Header, Footer, Sider, Content } = Layout

export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { collapsed: true }
  }

  toggle() {
    console.log('click')
    this.setState({
      collapsed: !this.state.collapsed
    })
  }

  render() {
    return (
      <Layout className="main-layout">
        <Sider className='sider'
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="app-logo" id="logo">
            <img src="images/logo.png" alt="Augecon_Logo" height="30" width="30"/>
          </div>
          <SideMenu />
        </Sider>
        <Layout>
          <Header className="app-header">
            <Row justify="center" align="middle">
              <Col span={3}>
                <Icon
                  className="app-trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle.bind(this)}
                />
              </Col>
              <Col span={10} push={10}>
                <div className="app-info" >Sexta feira 12/01/2018 - 17:58 | Daniel Oliveira</div>
              </Col>
              <Col span={3} push={8}>
                <UserAvatar/>
              </Col>
            </Row>
          </Header>
            <Content className="app-background" >
              <div className="div-background">
                <div>
                  <img src="images/sagic.png" alt="sagic" className="img-title" center center fixed/>
                </div>
                <Row type="flex" gutter={32} justify="space-around" className="row-card">
                  <Col span={7} push={1}>
                    <CardSuporte/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardSugestoes/>
                  </Col>
                  <Col span={7} push={1}>
                    <CardLoja/>
                  </Col>
                </Row>
              </div>
            </Content>
        </Layout>
      </Layout>
    )
  }
}

我已经尝试了一些 css 操作，例如 {position:fixed, relative, etc..} 但没有任何结果。

Answer 1

我知道我回答的有点晚了...... 我通常按​​如下方式解决这个问题:

1. 固定侧边栏位置，但仅限于类名为“.ant-sidebar-sider-below”的情况

   .ant-layout-sider-below { 位置:固定； z-指数:999； 高度:100%；

2. 然后你可以修复菜单触发按钮，当侧边栏有类名“.ant-layout-sider-collapsed”时，这个 css

   .ant-layout-sider-collapsed .ant-layout-sider-zero-width-trigger { 位置:固定； 左:4px； 右:自动；

我创建了一个小例子 link 我希望这对某人有用