Question

在一些S.O.的帮助下用户，我能够得到部分导航问题的答案。放一个“display：none;”我的导航ID上的标记，在查看移动设备时导航菜单已折叠。

新问题是，在执行此操作后，我无法在移动视图中打开/关闭导航按钮。我见过其他S.O.解释缺少脚本的问题，而不是正确标记ID。看了我的项目大约一个星期后，我相信我没有任何这些问题。

任何Bootstrap程序员可以帮助我吗？我认为它与“display：none”有关导航ID上的标记。网站链接：www.thesunkenweb.com/loteksystems和HTML / CSS如下。我认为问题可能存在于main.css样式页面的“.hidden”类中，以及responsive.css样式页面上的@ 767px媒体查询。两者都包括“display：none;”。也许他们正在相互消灭？非常感谢！

<!-- Start Header Section -->
<header class="main_menu_sec navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="lft_hd">
                <a href="index.html"><img src="http://www.thesunkenweb.com/loteksystems/img/LotekSystemsLogo_1.png" alt="Lotek Systems"/></a>
            </div>
        </div>          
        <div class="col-lg-9 col-md-9 col-sm-12">
            <div class="rgt_hd">                    
                <div class="main_menu">
                    <nav id="nav_menu">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>   
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="navbar">>
                        <ul>
                            <li><a class="page-scroll" href="index.html">Home</a></li> 
                            <li><a class="page-scroll" href="#abt_sec">About Us<i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li><a class="page-scroll" href="#tm_sec">Meet Andy</a></li>
                                    <li><a class="page-scroll" href="#tstm_sec">Testimonials</a></li>
                                    <li><a class="page-scroll" href="#clt_sec">Experience</a></li>
                                </ul>
                            </li>                       
                            <li><a class="page-scroll" href="#pr_sec">Services<i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li><a class="page-scroll" href="CustomCloudManagement.html">Custom Managed Cloud Hosting</a></li>
                                    <li><a class="page-scroll" href="CloudMigration.html">Cloud Migration</a></li>
                                    <li><a class="page-scroll" href="ApplicationManagement.html">Application Management</a></li>
                                    <li><a class="page-scroll" href="ComputerRepairs.html">Computer Repairs</a></li>
                                </ul>
                            </li>
                            <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li>
                        </ul>
                    </div>      
                    </nav>          
                </div>                          
            </div>
        </div>  
    </div>  
</div>  
 </header>
 <!-- End Header Section -->

Answer 1

在responsive.css的第74行，您有以下代码：

@media (max-width: 767px)        
    #navbar {
        display: none;
    }
}

这就是停止Bootstrap的切换功能来显示和隐藏导航。如果删除该代码，导航将正常工作。

Bootstrap导航菜单不适用于移动视图

1 个答案: