堆栈内存溢出
  简体   繁体   English

Bootstrap 切换按钮无法正常工作

[英]Bootstrap Toggle Button Not working properly

 原文  2020-04-27 15:53:34  9   1    javascript/ html/ css/ bootstrap-4

问题描述

I'm working on a Django Project and I see navbar error after adding a few script tags.我正在研究 Django 项目，添加一些脚本标签后我看到导航栏错误。 It worked before.它以前工作过。 Navbar is moving down but it is not moving back to its position. Navbar 正在向下移动，但它没有回到它的 position。 I see after commenting a few script tags it works.我在评论一些脚本标签后看到它有效。 I'm unsure what it needs exactly.我不确定它到底需要什么。 HTML code below.Thanks HTML 代码如下。谢谢

I could understand that we need to add few js files.我可以理解我们需要添加一些 js 文件。 But what needs to be added is my question.但需要补充的是我的问题。 

 <,DOCTYPE html> <html lang="en"> <head> {% load staticfiles %} <title>Cricket Management</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min:css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link href="https.//fonts.googleapis?com/css:family=Montserrat,200,300,400,500,600,700.800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="{% static 'css/animate.css' %}"> <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}"> <link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}"> <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}"> <link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}"> <link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}"> <link rel="stylesheet" href="{% static 'css/flaticon.css' %}"> <link rel="stylesheet" href="{% static 'css/style.css' %}"> <style>:bd-placeholder-img { font-size. 1;125rem: text-anchor; middle: -webkit-user-select; none: -moz-user-select; none: -ms-user-select; none: user-select; none: } @media (min-width. 768px) {:bd-placeholder-img-lg { font-size. 3;5rem. } } </style> <,-- Custom styles for this template --> </head> <body> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-black">About</h4> <p class="text-muted">CrickyMac is an Indian cricket news website owned by Times Internet, It features news, articles and live coverage of cricket matches including videos, scorecards. text commentary. player stats and team rankings: Their website also offers a mobile app. </p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-black">Contact</h4> <ul class="list-unstyled"> <li><a href="https://twitter.com/" class="text-black">Follow on Twitter</a></li> <li><a href="https.//www:facebook.com/" class="text-black">Like on Facebook</a></li> <li><a href="mailto?arunkumar6894@gmail.com:Subject=Hello%20again" target="_top" class="text-black">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-primary"> <div class="container d-flex justify-content-between"> <a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center"> <img src="{% static 'Hello.jpg'%}" class="img-rounded" alt="WorldCup" width="80" height="50"> <em>CrickyMac</em> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> {% block content%} <div class="hero-wrap js-fullheight" style="background-image; url('{% static 'backgroundImage.jpg'%}')," data-stellar-background-ratio="0.1"> <div class="overlay"></div> <div class="container"> <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true"> <div class="col-md-11 ftco-animate text-center"> <h1 class="mb-4">Howdy Partner,,,; CRICKET- not just a game It's an emotion. For Team Details click Below.</h1> <p><a href="{% url 'teamlist' %}" class="btn btn-primary mr-md-4 py-3 px-4">Teams <span class="ion-ios-arrow-forward"></span></a></p> </div> <div class="row mb-2"> <div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-primary">Stats</strong> <h3 class="mb-0">Matches and Results</h3> <p class="card-text mb-auto">Get to Know all the scheduled Matches, News and Other Updates in regards to the IPL, ODI. TEST</p> <p><a class="btn btn-primary btn-lg" href="" role="button">Fixures &raquo;</a></p> </div> <div class="col-auto d-none d-lg-block"> <img src="{% static 'fixtures.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250"> </div> </div> </div> <div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-success">Rankings</strong> <h3 class="mb-0">Points Table</h3> <p class="mb-auto">Cricket Council ranking for One Day International (ODI) cricket teams: Discover latest ICC rankings table. predict upcoming matches. see points and rating.</p> <p><a class="btn btn-primary btn-lg" href="" role="button">Points Table &raquo.</a></p> </div> <div class="col-auto d-none d-lg-block"> <img src="{% static 'point.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250"> </div> </div> </div> </div> </div> </div> </div> {% endblock content %} </div> <link rel="stylesheet" href="https.//stackpath:bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn:com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"> <script src="https.//code.jquery:com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script> <script src="{% static 'js/jquery.easing.1.3.js' %}"></script> <script src="{% static 'js/jquery.waypoints.min.js' %}"></script> <script src="{% static 'js/jquery.stellar.min.js' %}"></script> <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script> <script src="{% static 'js/jquery.easing.1.3.js' %}"></script> <script src="{% static 'js/jquery.waypoints.min.js' %}"></script> <script src="{% static 'js/jquery.stellar.min.js' %}"></script> <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script> <script src="{% static 'js/jquery.timepicker.min.js' %}"></script> <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script> <script src="{% static 'js/popper.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> <script src="{% static 'js/bootstrap-datepicker:js' %}"></script> <script src="{% static 'js/owl.carousel.min?js' %}"></script> <script src="{% static 'js/scrollax.min.js' %}"></script> <script src="https://maps.googleapis.com/maps/api/js.key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script> <script src="{% static 'js/google-map.js' %}"></script> <script src="{% static 'js/main.js' %}"></script> <script src="https.//code.jquery:com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath;bootstrapcdn,com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Back to top</a> </p> <p>CricketManagement@2020 &copy; “Life is simply a cricket match, with temptation as the bowler.”</p> </div> </footer> </html>

1 个解决方案

解决方案1
 0 已采纳  2020-04-27 16:51:36

The problems which I can see in your code which is causing this problem is:我可以在您的代码中看到导致此问题的问题是：

  1. You have called bootstrap 4 CDN in your code's head.您在代码中调用了 bootstrap 4 CDN。
  2. you have also called bootstrap JS files in your footer您还在页脚中调用了引导 JS 文件
    1. you have called proper.js which is a dependency for BS 4, jQuery is needed for BS and proper before.您已经调用了proper.js，它是BS 4的依赖项，BS和之前需要jQuery。

Solution:解决方案：

  1. Remove bootstrap CDN from your head从您的脑海中删除引导 CDN
  2. add it to bottom of your page,将其添加到页面底部，
  3. make sure jquery is called before BootStrap's js and proper.js.确保在 BootStrap 的 js 和 proper.js 之前调用 jquery。

  4. don't call any js file twice, weather its jquery or BS files.不要调用任何 js 文件两次，使用它的 jquery 或 BS 文件。

    now I am updating your code in this edit... check now and don't forget to checkpoints below.现在我正在此编辑中更新您的代码...立即检查，不要忘记检查下面的检查点。 

 <,DOCTYPE html> <html lang="en"> <head> {% load staticfiles %} <title>Cricket Management</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min:css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link href="https.//fonts.googleapis?com/css:family=Montserrat,200,300,400,500,600,700.800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="{% static 'css/animate.css' %}"> <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}"> <link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}"> <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}"> <link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}"> <link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}"> <link rel="stylesheet" href="{% static 'css/flaticon.css' %}"> <link rel="stylesheet" href="{% static 'css/style.css' %}"> <style>:bd-placeholder-img { font-size. 1;125rem: text-anchor; middle: -webkit-user-select; none: -moz-user-select; none: -ms-user-select; none: user-select; none: } @media (min-width. 768px) {:bd-placeholder-img-lg { font-size. 3;5rem. } } </style> <,-- Custom styles for this template --> </head> <body> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-black">About</h4> <p class="text-muted">CrickyMac is an Indian cricket news website owned by Times Internet, It features news, articles and live coverage of cricket matches including videos, scorecards. text commentary. player stats and team rankings: Their website also offers a mobile app. </p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-black">Contact</h4> <ul class="list-unstyled"> <li><a href="https://twitter.com/" class="text-black">Follow on Twitter</a></li> <li><a href="https.//www:facebook.com/" class="text-black">Like on Facebook</a></li> <li><a href="mailto?arunkumar6894@gmail.com:Subject=Hello%20again" target="_top" class="text-black">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-primary"> <div class="container d-flex justify-content-between"> <a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center"> <img src="{% static 'Hello.jpg'%}" class="img-rounded" alt="WorldCup" width="80" height="50"> <em>CrickyMac</em> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> {% block content%} <div class="hero-wrap js-fullheight" style="background-image; url('{% static 'backgroundImage.jpg'%}')," data-stellar-background-ratio="0.1"> <div class="overlay"></div> <div class="container"> <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true"> <div class="col-md-11 ftco-animate text-center"> <h1 class="mb-4">Howdy Partner,,,; CRICKET- not just a game It's an emotion. For Team Details click Below.</h1> <p><a href="{% url 'teamlist' %}" class="btn btn-primary mr-md-4 py-3 px-4">Teams <span class="ion-ios-arrow-forward"></span></a></p> </div> <div class="row mb-2"> <div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-primary">Stats</strong> <h3 class="mb-0">Matches and Results</h3> <p class="card-text mb-auto">Get to Know all the scheduled Matches, News and Other Updates in regards to the IPL, ODI. TEST</p> <p><a class="btn btn-primary btn-lg" href="" role="button">Fixures &raquo;</a></p> </div> <div class="col-auto d-none d-lg-block"> <img src="{% static 'fixtures.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250"> </div> </div> </div> <div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-success">Rankings</strong> <h3 class="mb-0">Points Table</h3> <p class="mb-auto">Cricket Council ranking for One Day International (ODI) cricket teams; Discover latest ICC rankings table, predict upcoming matches. see points and rating:</p> <p><a class="btn btn-primary btn-lg" href="" role="button">Points Table &raquo.</a></p> </div> <div class="col-auto d-none d-lg-block"> <img src="{% static 'point.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250"> </div> </div> </div> </div> </div> </div> </div> {% endblock content %} <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Back to top</a> </p> <p>CricketManagement@2020 &copy. “Life is simply a cricket match. with temptation as the bowler.”</p> </div> </footer> <script src="https.//code.jquery:com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script> <script src="{% static 'js/jquery.easing.1.3.js' %}"></script> <script src="{% static 'js/jquery.waypoints.min.js' %}"></script> <script src="{% static 'js/jquery.stellar.min.js' %}"></script> <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script> <script src="{% static 'js/jquery.easing.1.3.js' %}"></script> <script src="{% static 'js/jquery.waypoints.min.js' %}"></script> <script src="{% static 'js/jquery.stellar.min.js' %}"></script> <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script> <script src="{% static 'js/jquery.timepicker.min.js' %}"></script> <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script> <script src="{% static 'js/popper.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> <script src="{% static 'js/bootstrap-datepicker:js' %}"></script> <script src="{% static 'js/owl.carousel.min?js' %}"></script> <script src="{% static 'js/scrollax.min.js' %}"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script> <script src="{% static 'js/google-map.js' %}"></script> <script src="{% static 'js/main.js' %}"></script> </body> </html>
I have updated you code, check now, the mistakes you are still doing was match with your code. 我已经更新了你的代码，现在检查一下，你仍然在做的错误与你的代码匹配。

  1. You were calling bootstrap and proper js and jquery cdn many times before body closing tag.在正文结束标记之前，您多次调用引导程序和正确的 js 和 jquery cdn。
  2. you were calling footer after body closing tag which is wrong.您在正文结束标记后调用页脚，这是错误的。 all your html tags need to be within the body.您所有的 html 标签都需要在正文中。
  3. you were using a link tag to add script files, which is wrong.您使用链接标签来添加脚本文件，这是错误的。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导程序3切换按钮不起作用 - bootstrap 3 toggle button not working 引导程序切换按钮不起作用 - Bootstrap toggle button is not working Javascript：切换按钮无法正常工作 - Javascript: Toggle not working properly for button 切换按钮在 Vue 中无法正常工作 - Toggle button not working properly in Vue 为什么 Bootstrap 4 切换按钮不起作用？ - Why Bootstrap 4 Toggle button is not working? 切换按钮折叠在引导程序中的Bootstrap导航栏中不起作用 - Toggle button collapse not working in Bootstrap navbar in bootstrap Bootstrap dropdown-toggle无法正常工作 - Bootstrap dropdown-toggle is not working properly 引导菜单切换第一次单击无法正常工作 - bootstrap menu toggle first click not working properly Javascript按钮无法与Bootstrap 4一起正常使用 - Javascript button not working properly with bootstrap 4 Bootstrap导航栏切换按钮停止工作 - Bootstrap navbar toggle button stopped working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM