Question

当我在手机上查看导航栏时，切换按钮等正在显示并正常工作，但我首先必须在原始（无响应）导航栏消失之前单击按钮。因此，当我只显示响应式导航栏时，我的完整无响应网站上的导航栏仍然显示。奇怪的是，当我点击切换按钮时，无响应的导航栏消失，一切正常。

<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="img/logo.PNG" alt=""/></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 aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>   
                        <div id="navbar">
                            <ul>
                                <li><a class="page-scroll" href="index.html">Home</a></li> 
                                <li><a class="page-scroll" href="#abt_sec">About Us</a></li>                                                        
                                <li><a class="page-scroll" href="#skill_sec">Skills</a></li>
                                <li><a class="page-scroll" href="#pr_sec">Services</a></li>
                                <li><a class="page-scroll" href="#protfolio_sec">Portfolio</a></li>
                                <li><a class="page-scroll" href="projects.html">Projects</a></li>
                                <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li>
                                <li><a class="page-scroll" href="#tm_sec">Team</a></li>
                            </ul>
                        </div>      
                        </nav>          
                    </div>                  

                </div>
            </div>  
        </div>  
    </div>  
</header>

Answer 1

您需要将折叠导航栏折叠添加到要在手机上折叠的位置。

工作片段：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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="img/logo.PNG" alt="LOGO HERE"/></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 aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle" type="button">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>   
                        <div id="navbar" class="collapse navbar-collapse">
                            <ul>
                                <li><a class="page-scroll" href="index.html">Home</a></li> 
                                <li><a class="page-scroll" href="#abt_sec">About Us</a></li>                                                        
                                <li><a class="page-scroll" href="#skill_sec">Skills</a></li>
                                <li><a class="page-scroll" href="#pr_sec">Services</a></li>
                                <li><a class="page-scroll" href="#protfolio_sec">Portfolio</a></li>
                                <li><a class="page-scroll" href="projects.html">Projects</a></li>
                                <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li>
                                <li><a class="page-scroll" href="#tm_sec">Team</a></li>
                            </ul>
                        </div>      
                        </nav>          
                    </div>                  

                </div>
            </div>  
        </div>  
    </div>  
</header>
<div>

＆＃13;

Answer 2

您需要使用导航栏ID

的折叠课程

<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="img/logo.PNG" alt=""/></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 aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>   
                    <div id="navbar" class="collapse">
                        <ul>
                            <li><a class="page-scroll" href="index.html">Home</a></li> 
                            <li><a class="page-scroll" href="#abt_sec">About Us</a></li>                                                        
                            <li><a class="page-scroll" href="#skill_sec">Skills</a></li>
                            <li><a class="page-scroll" href="#pr_sec">Services</a></li>
                            <li><a class="page-scroll" href="#protfolio_sec">Portfolio</a></li>
                            <li><a class="page-scroll" href="projects.html">Projects</a></li>
                            <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li>
                            <li><a class="page-scroll" href="#tm_sec">Team</a></li>
                        </ul>
                    </div>      
                    </nav>          
                </div>                  

            </div>
        </div>  
    </div>  
</div>

Bootstrap Navbar没有完全响应，原始导航栏仍然显示

2 个答案: