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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (360)

我在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>
提问于
用户回答回答于

这只是代码的一半,如果我们可以使用你的css代码,这会使问题变得更容易

扫码关注云+社区

领取腾讯云代金券