Question

我在导航视图中使用以下导航代码

<nav class="navbar navbar-default navbar-fixed-top  ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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.php">
            <img src="img/logo.png" class='img-responsve' alt='Transskilks'/>
          </a>
        </div>
          <div  class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" id="socialnav">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="talentacquisition.php">Talent Acquisition</a></li>
                            <li><a href="consultancy.php">Consulting & Advisory</a></li>
                            <li><a href="payroll.php">Global Payroll Outsource</a></li>
                            <li><a href="timeandattendanc.php">Time and Attendance System</a></li>

                        </ul>
                    </li>
                    <li><a href="contact.php">Contact</a></li>

                    <li><a href="../navbar-static-top/"><i class="fab fa-facebook-f"></i></a></li>
                    <li class="active"><a href="./"><i class="fab fa-twitter"></i></a></li>

                   <li class="active"><a href="./"><i class="fab fa-instagram"></i></a></li>                     </i></a></li>
                   <li class="active"><a href="./"><i class="fab fa-google-plus-g"></i></a></li>
                   <li class="active"><a href="./">  <i class="fab fa-linkedin-in"></i></a></li>
              </ul>
          </div><!--/.nav-collapse -->
      </div>
    </nav>

CSS：

`<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'`>

JS

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

一切正常，但在移动视图中导航栏无法打开，有人可以帮我解决这里的问题吗，我也没有在其他js文件的控制台中找到任何问题。

Answer 1

尝试将按钮放在导航栏本身之外。此外，请确保按钮的数据目标与标签的ID之间没有匹配，因为折叠仅适用于ID，不适用于类。

Twitter Bootstrap：导航栏未在移动视图中打开

1 个答案: