无法使用媒体查询使导航栏响应答案

【问题标题】：Cannot make navbar responsive using media queries无法使用媒体查询使导航栏响应
【发布时间】：2020-04-06 16:44:14
【问题描述】：

当我尝试将它们按不同的顺序排列时，它似乎会改变，其中有什么特定的顺序吗？这是我的一些媒体查询代码：

    @media only screen and (min-width:700px){
        header{
            height: 8rem;  
        }

        .nav-brand{
            width: 3.5rem;
        }

        .nav-list{
            width: initial;
            height: initial;
            background-color: transparent;
            position: initial;
            top: initial;
            right: initial;
            flex-direction: row;
            transition: initial;
        }

        .menu-icons{
            display: none;
        }

        .nav-item{
            margin: 0 2.5rem;
        }

        .nav-link{
            color: #000000;
            position: relative;
            font-size: 1.3rem;
        }
}

【问题讨论】：

这适用于宽度 > 700px 的设备，我们可以帮助更多人查看您的完整 CSS
您可以使用引导程序来拥有响应式导航栏：getbootstrap.com/docs/4.0/components/navbar
我如何发布所有代码，因为当我这样做时，它说它很可能是所有代码，那么我如何向您展示所有代码？ @Ziad Darwich
尝试在这里codepen.io创建一支笔

标签： jquery html css bootstrap-4

【解决方案1】：

只是导航栏没有响应媒体查询，还是整个网站？

我忘记输入一次或两次视口元标记。因为它通常由我使用的框架和 CMS 平台处理。所以这可能值得检查。 :-)

<meta name="viewport" content="width=device-width, initial-scale=1">

查看 MDN 网络文档； https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

或 CSS 技巧； https://css-tricks.com/snippets/html/responsive-meta-tag/

【讨论】：