时间戳

首页 > 解决方案 > 我在折叠模式下的引导模板导航栏不起作用

twitter-bootstrap - 我在折叠模式下的引导模板导航栏不起作用

问题描述

请有人可以帮助我，我不确定我做错了什么。

我已经尝试了这里的所有修复，但似乎仍然无法修复我的导航栏。响应式视图中导航栏中的链接不可点击。我使用了关于 w3 学校的教程，所以不确定是什么原因造成的。此外，导航栏中的文本格式不正确。任何帮助将不胜感激。TIA

下面的代码：

<body data-spy="scroll" data-target=".navbar-collapse">

    <div class="culmn">
        <!--Home page style-->


        <nav class="navbar navbar-default bootsnav navbar-fixed" role="navigation">

         <div class="navbar-top bg-grey fix">                   
             <div class="container">

                    <div class="row">
                      <div class="col-md-6">
                            <div class="navbar-callus text-left sm-text-center">
                                <ul class="list-inline">
                                    <li><a href="tel:0878209100"><i class="fa fa-phone"></i> Call us: 087 820 9100</a></li>
                                    <li><a href="mailto:sales@urs.co.za"><i class="fa fa-envelope-o"></i> Contact us: sales@urs.co.za</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

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





                <!-- Start Header Navigation -->
                <div class="container">
                <div class="row">
                <div class="navbar-header" role=navigation>
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#NavBarMenu">
                        <i class="fa fa-bars"></i>
                    </button>
                  <a href="index.html"><img src="assets/images/URS-Logo.png" alt="" width="150" class="logo"></a>


                </div>
                <!-- End Header Navigation -->

                <!-- navbar menu -->
                <div class="navbar-collapse collapse " id="NavBarMenu">
                  <ul class="nav navbar-nav navbar-right">                  
                        <li><a href="About.html">Our Story</a></li>
                    <li class="dropdown">
    <a href="Solutions.html" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Solutions</a>
     <ul class="dropdown-menu"> 
     <li><a href="Solutions.html#BI">Retail Software</a></li>
     <li><a href="Solutions.html#RI">Business Intelligence</a></li>
     <li><a href="Solutions.html#Integrations">Integrations</a></li>
     <li><a href="Solutions.html#DM">Data Management</a></li>
    </ul>
   </li>
                        <li><a href="Customers.html">Our Customers</a></li>
                        <li><a href="Support.html">Support</a></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>

                </div><!-- /.navbar-collapse -->
    </div>
</div>
      </nav>
</div>

标签： twitter-bootstrapnavbarresponsive

解决方案

在此处输入图像描述

我刚刚检查了你的 jsfiddle，它正在工作。菜单图标不可见，因为 Codepen 中不包含 fontawesome CSS。用于字体真棒中的条形图标。 https://fontawesome.com/how-to-use/svg-with-js

还发现了一些 HTML 问题，因为“！Doctype>”在顶部可见。尝试使用以下验证工具验证您的模板 HTML。

http://validator.w3.org/

推荐阅读