首頁  >  問答  >  主體

"無法開啟Bootstrap選單的問題"

我搜尋了很久為什麼我的Bootstrap選單不打開。

我首先連結了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/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>

還有我的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";

感謝您的支持!

P粉769045426P粉769045426401 天前562

全部回覆(1)我來回復

  • P粉794177659

    P粉7941776592023-09-14 17:40:03

    您兩次引入了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/bootstrap@4.0.0/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/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>

    回覆
    0
  • 取消回覆