Question

我正在引导程序中创建导航栏，问题是当我调整浏览器大小时，它会显示导航切换按钮，并且如果页面是用chrome浏览或Opera导航切换按钮未显示，则显示完整菜单。我将网站上传到一个域中，并通过电话进行了查看，但没有切换按钮，只是完整的导航菜单。我的问题的屏幕快照链接为http://zian.tk/pictures/Capture01.jpg

该代码的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>

Answer 1

这只是代码的一半，我们也可以拥有您的CSS代码，这会使拍摄麻烦一点点

类navbar-expand-md中导航栏的响应性问题

1 个答案: