我搜索了很長時間為什么我的引導程式選單打不開。
我首先鏈接了 JQuery 以使其作業，但它似乎沒有任何改變。我不知道我是否漏掉了一點。我的控制臺沒有說明缺少 JQuery。
這是我的 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
還有我的 application.scss
// Graphical variables
@import "config/fonts";
@import "config/colors";
// External libraries
@import "bootstrap/scss/bootstrap";
@import "font-awesome";
// Your CSS partials
@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";
// Pages partials
@import "pages/home";
@import "pages/index";
@import "pages/works";
@import "pages/about";
感謝您的支持！
uj5u.com熱心網友回復：
你包含了兩次 Bootstrap JS 和兩次 jQuery。
嘗試這個：
<!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 %>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<!-- Bootstrap 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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534764.html
標籤：网页格式查询CSSruby-on-rails引导程序 4
上一篇：單擊按鈕將元素移動到不同位置