bootstrap4.1下拉菜单需点2次才能下拉

2018-04-14 12:22:25 993 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

前端必知必会-Bootstrap 5 下拉菜单本文介绍了Bootstrap 5 下拉菜单的使用，如有问题欢迎私信和评论。阅读详情

参考https://v4.bootcss.com/docs/4.0/components/navbar/
官方页面上的例子下拉菜单是正常的，但将官方代码写到自己的.html文件中测试首次需要点2次才能实现下拉。代码如下：



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<style type="text/css">



</style>



</head>

<body>

	<nav class="navbar navbar-expand-lg navbar-light bg-light">

	  <a class="navbar-brand" href="#">Navbar</a>

	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

	    <span class="navbar-toggler-icon"></span>

	  </button>

	

	  <div class="collapse navbar-collapse" id="navbarSupportedContent">

	    <ul class="navbar-nav mr-auto">

	      <li class="nav-item active">

	        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

	      </li>

	      <li class="nav-item">

	        <a class="nav-link" href="#">Link</a>

	      </li>

	      <li class="nav-item dropdown">

	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

	          Dropdown

	        </a>

	        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

	          <a class="dropdown-item" href="#">Action</a>

	          <a class="dropdown-item" href="#">Another action</a>

	          <div class="dropdown-divider"></div>

	          <a class="dropdown-item" href="#">Something else here</a>

	        </div>

	      </li>

	      <li class="nav-item">

	        <a class="nav-link disabled" href="#">Disabled</a>

	      </li>

	    </ul>

	    <form class="form-inline my-2 my-lg-0">

	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

	    </form>

	  </div>

	</nav>



	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>

	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>

</body>



</html>