<!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>
我在我的项目中使用 bootstrap 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>
您可以通过点击
here ! 或者直接在下面查看
最佳答案
所以我发现了两个问题，首先是您的资源没有正确链接。请再次检查您的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”属性中，可折叠分区的 id 之前有一个空格。删除该空格。
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
Here是您代码的工作笔。
关于javascript - 为什么在超小的屏幕尺寸下，当我点击折叠按钮时它没有打开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56099994/