[英]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.