Bootstrap下拉按鈕不起作用

-1

我是新手bootstrap.I有關於下拉按鈕功能的問題。雖然包括從遠程服務器（即從code.jquery.com，cdnjs.cloudflare jQuery和引導文件。 com，maxcdn.bootstrapcdn.com）下拉菜單功能正常工作。但是，通過包含本地存儲的文件進行脫機工作時，下拉菜單功能無法正常工作。請提前幫助。Bootstrap下拉按鈕不起作用

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container-fluid"> 
 
     <div class="btn-toolbar" role="toolbar" aria-level="Toolbar example"> 
 

 
      <div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1"> 
 
       <button class="btn btn-outline-primary">Button 1</button> 
 
       <button class="btn btn-outline-primary">Button 2</button> 
 
       <button class="btn btn-outline-primary">Button 3</button> 
 
       <button class="btn btn-outline-primary">Button 4</button> 
 
      </div> 
 

 
      <div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown"> 
 
       <button class="btn btn-outline-secondary">Button 1</button> 
 
       <button class="btn btn-outline-secondary">Button 2</button> 
 
       <button class="btn btn-outline-secondary">Button 3</button> 
 
       <button class="btn btn-outline-secondary">Button 4</button> 
 

 
       <!--- Nested menu --> 
 
       <div class="btn-group" role="group"> 
 
        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
         Dropdown 
 
        </button> 
 
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> 
 
         <a class="dropdown-item" href="#">Dropdown link</a> 
 
         <a class="dropdown-item" href="#">Dropdown link</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="btnGroupAddon">@</span> 
 
       <input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon"> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 

 
    <script src="jquery/jquery-3.2.1.slim.min.js"></script> 
 
    <script src="popper/popper.min.js"></script> 
 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
 
    
 
    </body> 
 
</html>

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container-fluid"> 
 
     <div class="btn-toolbar" role="toolbar" aria-level="Toolbar example"> 
 

 
      <div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1"> 
 
       <button class="btn btn-outline-primary">Button 1</button> 
 
       <button class="btn btn-outline-primary">Button 2</button> 
 
       <button class="btn btn-outline-primary">Button 3</button> 
 
       <button class="btn btn-outline-primary">Button 4</button> 
 
      </div> 
 

 
      <div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown"> 
 
       <button class="btn btn-outline-secondary">Button 1</button> 
 
       <button class="btn btn-outline-secondary">Button 2</button> 
 
       <button class="btn btn-outline-secondary">Button 3</button> 
 
       <button class="btn btn-outline-secondary">Button 4</button> 
 

 
       <!--- Nested menu --> 
 
       <div class="btn-group" role="group"> 
 
        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
         Dropdown 
 
        </button> 
 
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> 
 
         <a class="dropdown-item" href="#">Dropdown link</a> 
 
         <a class="dropdown-item" href="#">Dropdown link</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="btnGroupAddon">@</span> 
 
       <input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon"> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 

 
    <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-09-13 japa costa

檢查您的src路徑是否正確，您的腳本位於何處？ –

源路徑是確定的。查看源代碼並單擊鏈接將導致文件。 –

我已經添加了一個id到文本box.id =「something」，並添加了以下代碼 –

包含的次序很可能是錯誤的。首先jquery，然後bootstrap和腳本在最後。檢查頁面源中的本地文件路徑。 Ctrl + U將打開它。閱讀有關在瀏覽器中使用Web控制檯的信息。將爲您節省大量時間。

來源

2017-09-13 04:33:14 arthooz

Bootstrap下拉按鈕不起作用

回答

相關問題