Question

我刚从w3schools.com复制了bootstrap 4下拉列表代码。但是我的visual studio代码中的下拉列表不起作用。虽然，该代码在在线编辑器中工作。请告诉我，如果我错过了什么，因为我是初学者。这是我的代码：

 `<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../Bootstrap4/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="../Bootstrap4/css/bootstrap.min.css">
  <link rel="stylesheet" href="../Bootstrap4/css/flexboxgrid.min.css">

</head>
<body>

<div class="container-fluid">
    <div class="row justify-content-center" style="background-color:#00061a;">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>


        <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </li>  
    </ul>
    </div> 

</div> <!-- End of container -->

<script src="../Bootstrap4/js/jquery-3.2.1.min.js"></script>
<script src="../Bootstrap4/js/bootstrap.min.js"></script>

</body>
</html>`

Answer 1

在bootstrap 4中

你必须使用id="dropdownMenuButton" on you a/button tag

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" 
    id="dropdownMenuButton"  href="#">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
    </div>
</li>

我的引导程序下拉不起作用

1 个答案: