如何像在移动设备上一样垂直制作 React-semantic-ui 下拉菜单？答案

【问题标题】：how to make React-semantic-ui dropdown vertically like on mobile?如何像在移动设备上一样垂直制作 React-semantic-ui 下拉菜单？
【发布时间】：2018-12-08 08:14:44
【问题描述】：

我的网站上有一个可堆叠的菜单和下拉菜单。在手机上一切正常，但是当我在 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 上的下拉菜单垂直下降，就像在手机上看到的那样？

【问题讨论】：

你考虑过使用css媒体吗？ github.com/contra/react-responsive
更新您的问题以包含runnable code snippet，这样人们会更容易回答。
其渲染方式由语义用户界面决定。如果它选择不以 ipad 等更高分辨率堆叠，那么您需要使用 !important 手动覆盖 css 中的导航栏样式。

标签： javascript reactjs web semantic-ui mobile-website

【解决方案1】：

根据最新的 React Semantic UI 文档。语义 ui 的反应包装器不支持它。

移动设备上的语义 UI 堆栈菜单，您需要更改它以适应您的情况

您需要手动覆盖由 semantic-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

【讨论】：