J'ai longtemps cherché pourquoi mon menu Bootstrap ne s'ouvre pas.
J'ai d'abord lié JQuery pour le faire fonctionner, mais rien ne semble changer. Je ne sais pas s'il manque quelque chose. Ma console n'affiche aucun message indiquant que JQuery est manquant.
Voici mon application.html.erb
<!DOCTYPE html> <html> <head> <title>Peachux</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> <script src="https://kit.fontawesome.com/b43f353bd3.js" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <%= render "shared/navbar" %> <%= render "shared/flashes" %> <%= yield %> <%= render "shared/footer" %> </body> </html>
Et mon application.scss
// 图形变量 @import "config/fonts"; @import "config/colors"; // 外部库 @import "bootstrap/scss/bootstrap"; @import "font-awesome"; // 你的CSS部分 @import "components/index"; @import "components/banner"; @import "components/button"; @import "components/work-card"; @import "components/work-header"; @import "components/profile"; @import "components/form"; @import "components/link"; @import "components/advantages-block"; @import "components/newsletter-block"; @import "components/testimonials"; @import "components/footer"; // 页面部分 @import "pages/home"; @import "pages/index"; @import "pages/works"; @import "pages/about";
Merci pour votre soutien !
Vous avez présenté Bootstrap JS deux fois et jQuery deux fois.
Veuillez essayer le code suivant :