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

Wasim 发表于 Dev

瓦西姆

我刚刚从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>`

手A

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。