Twitter Bootstrap: панель навигации не открывается в мобильном представлении

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

Попробуйте положить кнопку за пределы самой панели навигации. Кроме того, убедитесь, что между целевым значением кнопки и идентификатором тега нет несоответствия, поскольку свертывание работает только с идентификаторами, а не с классами.