html - Bootstrap 导航栏切换不起作用(扩展)
问题描述
我正在努力使用由 HTML CSS 和 Bootstrap 制成的导航栏。我在 youtube 上遵循了一些教程,但是当屏幕尺寸减小到最小时,我似乎可以展开切换按钮。由于我正在开始一个新项目,因此我使用 HTML CSS 和 Bootstrap 应用了所有这些,并在我的本地目录中打开了 HTML 文件。请帮我!我已经被困了好几个小时了。
以下是我所做的代码:
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="title.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<a class="navbar-brand>Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
</body>
我的结果如下:
我将获得如上所示的切换器图标,但我将无法单击它并获得“主页”、“类别”、“关于”和“联系方式”。我不知道我哪里做错了。
感谢您的时间。
解决方案
Bootstrap 需要 JavaScript 才能正常运行。您应该添加 Bootstrap 需要的脚本。来源:https ://getbootstrap.com/docs/4.5/getting-started/introduction/#js
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
推荐阅读
- amazon-web-services - 一个域,两个不同的 Vue 站点,由 Cloudfront / S3 提供服务
- typescript - 使用角度 ng-update 示意图迁移重大更改
- java - 找不到JAVA的路径?
- delphi - 右键单击不会更新 TControlList 中的 ItemIndex
- php - Laravel 重定向返回问题
- c++ - 当基类没有虚拟析构函数时,将模拟作为 unique_ptr 传递
- spring - 在 spring security UI grails 插件中添加更多属性
- r - 从字符串中提取特定值
- pandas - 从某些列值中删除一个字符串,然后对它们进行操作 Pandas
- reactjs - 如何防止 useEffect 上一个是屏幕