Question

我正在使用React Semantic UI固定垂直菜单，但是它涵盖了其他内容。我想知道如何使它显示内容并防止在调整窗口大小时使其与内容重叠。这是我的代码，这里可能是什么问题？

水平菜单：https://secure.phabricator.com/conduit/method/project.edit/

垂直菜单：This link

内容项组：This link

 import React, { Fragment } from "react";
    import { Container, Menu, Label, Input, Item } from "semantic-ui-react";

    function App() {
      return (
        <Fragment>
          <Menu inverted>
            <Menu.Item name="home" />
            <Menu.Item name="messages" />
            <Menu.Item name="friends" />
            <Menu.Item name="settings" />
            <Menu.Item name="profile" />
          </Menu>

          <Menu vertical fixed="left">
            <Menu.Item name="inbox">
              <Label color="teal">1</Label>
              Inbox
            </Menu.Item>

            <Menu.Item name="spam">
              <Label>51</Label>
              Spam
            </Menu.Item>

            <Menu.Item name="updates">
              <Label>1</Label>
              Updates
            </Menu.Item>
            <Menu.Item>
              <Input icon="search" placeholder="Search mail..." />
            </Menu.Item>
          </Menu>
          <Container>
            <Item.Group link>
              <Item>
                <Item.Image size="tiny" src="https://www.gravatar.com/avatar/0" />

                <Item.Content>
                  <Item.Header>Stevie Feliciano</Item.Header>
                  <Item.Description>Text</Item.Description>
                </Item.Content>
              </Item>

              <Item>
                <Item.Image size="tiny" src="https://www.gravatar.com/avatar/0" />

                <Item.Content>
                  <Item.Header>Veronika Ossi</Item.Header>
                  <Item.Description>Text</Item.Description>
                </Item.Content>
              </Item>

              <Item>
                <Item.Image size="tiny" src="https://www.gravatar.com/avatar/0" />

                <Item.Content>
                  <Item.Header>Jenny Hess</Item.Header>
                  <Item.Description>Text</Item.Description>
                </Item.Content>
              </Item>
            </Item.Group>
          </Container>
        </Fragment>
      );
    }

export default App;

我们非常感谢您的帮助

React Semantic UI固定垂直菜单涵盖内容

0 个答案: