将响应式菜单分成两列答案

【问题标题】：Split responsive menu into two coloumns将响应式菜单分成两列
【发布时间】：2017-11-01 20:32:47
【问题描述】：

这是我正在开发的网站http://www.jokerleb.com/，我正在使用这个https://responsive.menu，免费版本。它会出现在 400 像素或更小的设备上。

如何将它的列分成 2 列？

如果可能的话，不知道如何编辑 CSS 以使其看起来正确。

【问题讨论】：

您实际上会想在 StackOverflow 上发布此内容，这是此站点的姊妹站点。 SO 处理一般编程问题以及 CSS 等。该网站专门用于 WordPress 开发。
@belinus 我已将其标记为迁移，感谢您通知我，版主将查看并决定
您目前使用的代码在哪里？而您只是想在responsive.menu 上的“免费”示例中滑出的响应式菜单中创建 2 列？
尝试在您的 css 中使用媒体查询取决于您的设备宽度
@MichaelCoker 这些示例没有提供图片中的设计，我不知道代码在哪里，很难在检查元素中定位 css。插件不多说

标签： php css wordpress menu responsive

【解决方案1】：

将这些行添加到您的代码中：

@media screen and (max-width: 400px){
    #responsive-menu-container{
        width:100%;
    }

    #responsive-menu {
        display: flex;
        flex-wrap: wrap;
    }

    #responsive-menu li{
        width:50%;
    }
}

它对我有用。

【讨论】：

【解决方案2】：

你会想使用media queries，所以这样的东西应该可以为你做：

<style>
@media screen and (max-width: 400px) {
     #responsive-menu-container li.responsive-menu-item {
         width: 50%;
         display: inline-block;
     }
}
</style>

请注意，您可能需要稍微尝试一下这个 CSS，因为宽度会根据 padding、margin 和 display 类型而有所不同。如果您提供 CSS 示例（或者更好的是 fiddle），我可以更准确地为您提供帮助。

点击类别按钮后，上面的行使其看起来像这样：

如果您更喜欢整个宽度，请将其包含在您的 @media 选项中：

#responsive-menu-container {
    width:100%;
}

【讨论】：

不知道代码在哪里，很难在检查元素中找到 css。插件不多说
您要编辑的是menu-header 列表吗？如果是这样，我在@media 部分中有.row，我会用#menu-header li.menu-item 替换它
我试过了，它目前在 css 中，我在 @media screen and (max-width: 400px) 中使用它没有工作
@Lynob 我更新了我的答案并附上了截图。