Html 导航栏扩展md类的导航栏响应问题

我正在bootstrap中创建导航栏，问题是当我调整浏览器大小时，它会显示导航切换按钮，如果在chrome或opera中检查页面，则导航切换按钮不会显示，并显示完整菜单。 我把网站上传到一个域名上，从手机上查看，但没有切换按钮，只需完成导航菜单。 我的问题的截图链接是

代码的HTML为：

<nav class="nav navbar navbar-expand-md bg-dark navbar-dark">
    <div class="row w-100">
        <div class="col-lg-2">
            <h1`enter code here` class="text-white text-center">
            LOGO
            </h1>
        </div> 
        <button class="navbar-toggler w-100" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button> 
        <div class="col-lg-8">
            <div class="collapse navbar-collapse text-center mx-auto justify-content-center" id="navbarSupportedContent">
                <ul class="navbar-nav text-centre mt-2" >
                    <li class="nav-item dropdown pr-4">
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                         <a class="dropdown-item" href="#">Action</a>
                         <a class="dropdown-item" href="#">Another action</a>
                         <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                        <a href="#" class="nav-link dropdown-item">home</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">about</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">blog</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">Insights</a>
                    </li>
                    <li class="nav-item pr-4">
                        <a href="#" class="nav-link  dropdown-item">contact</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link  dropdown-item">Services</a>
                    </li>
                </ul>

            </div>
        </div>
        <div class="col-lg-2 col-md-12 pt-3 float-right justify-content-end ">
            <div class="text-center">
                <a href="#" class="pr-2 mb-0"><i class="fab fa-twitter"></i></a>
                <i class="fab fa-facebook pr-2 mb-0"></i>
                <i class="fab fa-instagram pr-2 mb-0"></i>
                <i class="fab fa-behance pr-2 mb-0"></i>
                <i class="fab fa-google pr-2 mb-0"></i>
                <i class="fab fa-pinterest"></i>
            </div>
        </div>
    </div>
</nav>

标志

请使用Stack Overflow的图像服务器，而不是外部站点来存储图像。在编辑图像时，通过单击文本输入区域上方的操作栏中的图像图标或拖放图像来上载图像。请回答你的问题，这样做。这样，您的问题就不会依赖于外部链接，而外部链接可能会在某个时候失效，并使您的问题对未来的访问者毫无用处。由于许可限制，我们可能无法为您执行此操作（取决于您选择的站点的许可证；我不打算花时间检查）。您的html中是否定义了视口元标记？感谢解决了很多问题，我丢失了。请使用Stack Overflow的图像服务器，而不是外部站点来存储图像。在编辑图像时，通过单击文本输入区域上方的操作栏中的图像图标或拖放图像来上载图像。请回答你的问题，这样做。这样，您的问题就不会依赖于外部链接，而外部链接可能会在某个时候失效，并使您的问题对未来的访问者毫无用处。由于许可限制，我们可能无法为您执行此操作（取决于您选择的站点的许可证；我不打算花时间检查）。您的html中是否定义了视口元标记？谢谢，很多问题都解决了，我失踪了