jquery - Bootstrap Navbar 下拉列表在桌面上变得凌乱，但在移动设备上却没有

Question

我遇到了一个问题，因为我没有深入研究设计部分我在 Education 部分使用 Tutoring 模板使用 w3layouts.com 中的模板。它是基于 Bootstrap 的模板。

由我编辑的演示页面在这里 Demo Page

我正在使用 Bootstrap 的 dropdown 按钮工具。当我在笔记本电脑中打开检查下拉按钮 Downloads 时，它看起来像这样

当我在我的手机上打开同一个页面时(实际上我减小了网络浏览器的大小)它看起来像这样

正如您在上图中使用 Desktop View 看到的那样，它看起来很乱...我现在应该做什么代码如下。

<div class="header" id="home">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="" /></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html" class="hvr-bounce-to-top">Home <span class="sr-only">(current)</span></a></li>

                  <!-- Problem Start From Here -->
                  <!-- Problem Start From Here -->
                  <!-- Problem Start From Here -->

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Downloads <span class="caret"></span></a>
                  <ul class="dropdown-menu">                      
                    <li class="dropdown-header">Practical Files</li>
                    <li><a href="#">Selected Download</a></li>
                    <li><a href="#">List View Mode</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Cover/Index Pages</li>
                    <li><a href="#">Front/Cover Pages</a></li>
                    <li><a href="#">Index Pages</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Reports Format</li>
                    <li><a href="#">Major/Minor Format</a></li>
                    <li><a href="#">Industrial File Format</a></li>
                    <li class="dropdown-header">Reports Files</li>
                    <li><a href="#">Major/Minor Projects</a></li>
                    <li><a href="#">Industrial Training</a></li>
                  </ul>
                </li>

                <!-- Till Here -->
                <!-- Till Here -->
                <!-- Till Here Maybe -->

                <li><a href="about.html" class="hvr-bounce-to-top">About</a></li>
                <li><a href="services.html" class="hvr-bounce-to-top">Services</a></li>
                <li><a href="contact.html" class="hvr-bounce-to-top">Contact</a></li>
            </ul>
            <div class="clearfix"></div>
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

如果对任何其他代码或完整代码有任何要求，请告诉我。我尝试在 html 中添加和删除代码，但总是让它变得更加困惑......

Answer 1

改变

.navbar-nav li {
    width: 20%;
    float: left;
}

到

.navbar-nav> li {
    width: 20%;
    float: left;
}