<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Oxygen</title> <link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Mukta" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="images/logo.png"> </a> </div> <div class="collapse navbar-collapse" id="myNav"> <ul class="nav navbar-nav navbar-right"> <li ><a href="index.html"> HOME </a></li> <li ><a href="service.html">SERVICE</a></li> <li ><a href="aboutus.html">ABOUT US</a></li> <li ><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="team.html">TEAM</a></li> <li ><a href="features.html">FEATURES</a></li> <li ><a href="blog.html">BLOG</a></li> <li class="active"><a href="contact.html">CONTACT</a></li> </ul> </div> </div> </nav> <div id="main-content-contact" class="container-fluid"> <h2 class="text-center">Contact Us </h2> <div id="brief-overview" class="text-center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Ipsum a arcu cursus vitae </div> <div class="row"> <div id="user-info" class="col-md-6 col-sm-6 col-xs-6"> <form> <input class="nameEmail nameEmail1" type="text" name="fName" placeholder="Name"> <input class="nameEmail nameEmail2" type="email" name="emailAddress" placeholder="Email Address"> <br> <input type="text" name="Subject" placeholder="Subject"> <br> <input id="enterMessage" type="text" name="Message" placeholder="Enter Your Message"> <br> <input id="submit-colors" type="submit" value="Send Now"> </form> </div> <div id="company-info" class="col-md-6 col-sm-6 col-xs-12"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere </div> <div id="contact-info"> <span class="fas fa-map-marker-alt"></span> Address: 2400 South Avenue A<br> <span class="fas fa-phone fa-rotate-90"></span> Phone: +928 336 2000<br> <span class="fas fa-envelope"></span> Email: support@oxygen.com<br> <span class="fas fa-globe-americas"></span> Website: wwww.sitename.com </div> </div> </div> </div> <footer id="footer-area" class="panel-footer"> <div class="container text-center"> <img src="images/logo.png" alt="the brand photo"> <div id="socail-container"> <div class="fab fa-dribbble"></div> <div class="fab fa-facebook-f"></div> <div class="fab fa-instagram"></div> <div class="fab fa-linkedin-in"></div> <div class="fab fa-tumblr-square"></div> <div class="fab fa-twitter"></div> <div class="fas fa-envelope"></div> </div> </div> </footer> <div id="copyright" class="container-fluid"> <span >© 2019 Oxygen Theme.</span> <span >Designed by Themeum</span> </div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> </html>
Я использую загрузчик 3 в своем проекте, и когда я уменьшаю масштаб окна браузера, появляется кнопка свертывания, но когда я нажимаю на нее, ничего не происходит принимая во внимание, я помещаю этот кусок кода в самый конец элемента body
<script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> и вы можете увидеть весь HTML-документ, нажав
<script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script>
здесь ! или вы можете увидеть это прямо на следующем
Итак, я обнаружил две проблемы, во-первых, ваши ресурсы не связаны должным образом.Пожалуйста, проверьте еще раз, что ваши js-файлы правильно помещены с такими же именами в директорию js.
Другой более простой способ, который я бы предложил - использовать cdn.Используйте эти три cdn
<!-- bootstrap-3 cdn --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
и поместите эти три ссылки в раздел заголовка документа в том же порядке.
Вторая проблема заключается в том, что в атрибуте data-toggle вашей кнопки-переключателяперед идентификатором разборного деления есть пробел.Уберите это место.
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
Здесь - это рабочее перо вашего кода.