如何像在移动设备上一样使React-semantic-ui下拉列表垂直？

Question

我的网站上有一个可堆叠的菜单和下拉菜单。一切在手机上都可以正常工作，但是当我在ipad上测试网站时，下拉菜单不可堆叠，并且某些内容未显示（例如，关于）

这是我的网站在每种设备上的外观：

在手机上

在Ipad上

我的密码

    <Menu
              fixed="top"
              stackable
              borderless
              fluid
              style={{
 marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
            >

              <Menu.Item
                style={{
                  textAlign: 'right',
                  display: 'block',
                  fontSize: '1.5em',
                }}
              >
                <Icon
                  onClick={this.handleIconClick}
                > <i
                  className="animated infinite bounce  iconsmind icon-Arrow-Up"
                />
                </Icon>
              </Menu.Item>

              {menu.items.map((item) => {
                if (item.menu_item_parent === '0') {
                  const menuList = menu.items.filter(
                    i => i.menu_item_parent === item.ID.toString(),
                  );
                  if (menuList.length === 0) {
                    return (
                      <Menu.Item
                        as="a"
                        key={item.ID}
                        link
                        href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                        style={{
                          textAlign: 'Left',
                          display: 'block',
                          fontSize: '1.5em',
                        }}
                      >
                        {item.title}
                      </Menu.Item>
                    );
                  }
                  return (
                    <Dropdown
                      floating
                      item
                      text={item.title}
                      key={item.ID}
                      style={{
                        textAlign: 'Left',
                        display: 'block',
                        fontSize: '1.5em',
                      }}
                    >
                      <Dropdown.Menu>
                        {menuList.map(i => (
                          <Dropdown.Item
                            key={i.ID}
                            href={`/${item.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}/${i.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}`}
                          >
                            {i.title}
                          </Dropdown.Item>
                        ))}
                      </Dropdown.Menu>
                    </Dropdown>
                  );
                }
                return null;
              })}
            </Menu>

那么如何像在手机上看到的那样使下拉菜单在ipad上垂直放置？

Answer 1

根据最新的React Semantic UI文档。react封装不支持语义ui。

移动设备上的语义UI堆栈菜单，您需要对其进行更改以适合您的情况

您将需要手动覆盖语义UI-css设置的最大宽度

当前样式

@media only screen and (max-width: 767px)
  .ui.stackable.menu .item {
  width: 100%!important;
}

您的自定义样式

@media only screen and (max-width: 800px) // or any width you want stackable menu on
  .ui.stackable.menu .item {
  width: 100%!important;
}

?? 注意：在导入semantic-ui-css之后，应包括css文件

import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling