[英]Why at extra small screen size, my collapse button doesn't open when i click on it?
<!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> ，然后单击可以查看整个html文档。
在这里 ！ 或者您可以直接在下面看到
因此，我发现了两个问题，首先是您的资源未正确链接。 请再次检查您的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>
将这三个链接以相同的顺序放在文档的头部。
第二个问题是，在切换按钮的“数据切换”属性中，可折叠分区的ID之前有一个空格。 删除该空间。
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
这是您代码的工作笔。
当我将屏幕尺寸缩小到Bootstrap的中，小或超小尺寸时，我的点击处理程序将停止工作，css悬停属性也将停止工作
[英]When I shrink my screen size down to a Bootstrap's medium, small, or extra small, my click handlers stop working and so does the css hover property
尝试创建手风琴菜单，当我点击问题的标题时，答案不会出现或崩溃，为什么会这样？
[英]Trying to create an accordion menu and when I click on the title of the question, the answer doesn't appear or collapse, why is this?
当我点击按钮时隐藏的内容没有显示，为什么会这样？
[英]When I click on the button the hidden content doesn't show, why is this?
为什么单击按钮时我的 Fewest Clicks 模态打开，但其他模态都没有打开？
[英]Why does my Fewest Clicks modal open when I click the button but none of my other ones open?
我不知道为什么当我在我的 HTML 程序上单击“Click = Past”按钮时，绿色字符图像不显示我在可汗学院尝试过
[英]I don't know why When I click the button "Click = Past" on my HTML program the green character image doesn't show up I tried to this in Khan academy
单击屏幕录制功能的“停止捕获”按钮时，弹出窗口不会消失
[英]Pop up doesn't disappear when I click "Stop Capture" button of screen recording functionality
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.