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下拉按钮不起作用

回答

相关问题