Bootstrap JavaScript已加載但無法運行

我正在嘗試新的Bootstrap，但我遇到了JavaScript問題。我有三條線在我的<body></body>年底裝好了：Bootstrap JavaScript已加載但無法運行

<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>

並配有下拉...這不工作了測試。我正在與Laravel和Blade合作，這可能是原因，不是嗎？

<!DOCTYPE html> 

<html> 
    <head> 
     <title>@yield('title')</title> 

     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <!-- CSS --> 
     <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 
     <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
    </head> 

    <body> 
     <!-- Content --> 
     <main class="container"> 
      @yield('main') 
     </main> 

     <div class="dropdown"> 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Dropdown button 
      </button> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
       <a class="dropdown-item" href="#">Action</a> 
       <a class="dropdown-item" href="#">Another action</a> 
       <a class="dropdown-item" href="#">Something else here</a> 
      </div> 
     </div> 

     <!-- Scripts --> 
     <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> 
    </body> 
</html>

編輯：我忘了，但是當我在控制檯做$.fn.tooltip.Constructor.VERSION，我有引導的版本號，這意味着它的加載沒有？

來源

2017-08-22 Wizix

你需要分享你使用bootstrap的代碼。 –

我分享了它，它是上面的下拉菜單 – Wizix

您的瀏覽器控制檯說什麼？ –

找到了答案......即使您只使用javascript，每件事都需要在.container之內。所以，這個工程現在很好：

<!DOCTYPE html> 

<html> 
    <head> 
     <title>@yield('title')</title> 

     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <!-- CSS --> 
     <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 
     <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
    </head> 

    <body> 
     <!-- Content --> 
     <div class="container"> 
      <div class="dropdown"> 
       <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Dropdown button 
       </button> 
       <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
        <a class="dropdown-item" href="#">Action</a> 
        <a class="dropdown-item" href="#">Another action</a> 
        <a class="dropdown-item" href="#">Something else here</a> 
       </div> 
      </div> 
     </div> 

     <!-- Scripts --> 
     <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> 
    </body> 
</html>

來源

2017-08-23 06:18:11 Wizix

Bootstrap JavaScript已加載但無法運行

回答

相關問題