Question

我一直在学习bootstrap，我有一个非常基本的页面，我正在努力学习。我尝试添加一个下拉列表，点击它时它根本没有下拉，我检查了论坛，主要的是人们没有引导程序js链接，所以我确定我包含了，我很确定我有适当的工作链接。（代码在片段中很奇怪，在其他所有内容上都能正常工作）感谢您的帮助，我的代码是：

 .div1 {
      background-color:#80bfff;
    }

    .div2 {
      background-color:#ccffff;
    }

    .div3 {
      background-color:#80bfff;
    }

    .row {
      height: calc(100vh - 300px);
    }

    #main {
      background-color: #3333ff;
    }

    #main_head {
      height: 150px;
      margin: 0;
    }

    #main_foot {
      height: 150px;
      background-color:#3333ff;
      margin: 0;
     position: absolute;
     left: 0;
     right: 0;
    
  }
  
  h1 {
    color: black;
  }

<!DOCTYPE html>
    <html>
      <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    
    </head>
    <body>
      
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
    <div class="container-fluid" id="main">
      <h1 id="main_head">This is a heading</h1>
      
      <div class="row">
        
        <div class="col-sm-2 div1">
          <div class="btn-group-vertical">
            <h4>These buttons don't work yet because I haven't implemented anything yet</h4>
            <button type="button" class="btn btn-warning">Button 1</button>
            <button type="button" class="btn btn-info">Button 2</button>
            <button type="button" class="btn btn-success">Button 3</button>
          </div>
        </div>
        
        <div class="col-sm-8 div2">
        </div>
        
        <div class="col-sm-2 div3">
          <div class="container">
            <h4>This is a dropdown menu</h4>
            <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
            <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Dropdown 1</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3t</a></li>
              </ul>
            </div>
          </div>
        </div>
        
      </div>
      
      <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
    </html>

Answer 1

首先，你在头部调用两个 bootstrap 版本1，在页脚上调用一个，第二个你需要在 bootstrap.js之前调用 popper.js

请参阅代码段

.div1 { background-color:#80bfff; } .div2 { background-color:#ccffff; } .div3 { background-color:#80bfff; } .row { height: calc(100vh - 300px); } #main { background-color: #3333ff; } #main_head { height: 150px; margin: 0; } #main_foot { height: 150px; background-color:#3333ff; margin: 0; position: absolute; left: 0; right: 0; } h1 { color: black; }

<!DOCTYPE html> <html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> <div class="container-fluid" id="main"> <h1 id="main_head">This is a heading</h1> <div class="row"> <div class="col-sm-2 div1"> <div class="btn-group-vertical"> <h4>These buttons don't work yet because I haven't implemented anything yet</h4> <button type="button" class="btn btn-warning">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <button type="button" class="btn btn-success">Button 3</button> </div> </div> <div class="col-sm-8 div2"> </div> <div class="col-sm-2 div3"> <div class="container"> <h4>This is a dropdown menu</h4> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> <li><a href="#">Dropdown 3t</a></li> </ul> </div> </div> </div> </div> <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div> </div> </body> </html>

Answer 2

我认为您应该尝试使用其他CDN文件，这对我有用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

bootstrap下拉列表不显示点击下拉列表

2 个答案: