django - 谁知道导航栏和引导程序?
问题描述
我不知道这个问题.. 导航栏的下拉菜单不起作用!与此消息
这是我的代码
<head>
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{%url 'home'%}">Portfolio</a>
<a class="dropdown-item" href="{%url 'signup'%}">회원가입</a>
<a class="dropdown-item" href="{%url 'login'%}">로그인</a>
<a class="dropdown-item" href="#">로그아웃</a>
</div>
</li>
</ul>
</div>
</nav>
{%block 内容%} {%endblock%}
解决方案
我认为 Bootstrap CDN 不正确,您缺少一些东西。
试试这个并告诉它是否有效?
<!-- CSS only -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
推荐阅读
- javascript - http触发时函数超时
- regex - 如何在正则表达式匹配中包含撇号
- ethereum - TypeError:return 语句中的参数数量与返回声明中的参数数量不同。返回_initialMessage;
- css - 在样式表中覆盖 modena 选择器
- java - 按降序对数组进行排序并仅从数组中返回匹配的 elemnet
- flutter - 问:使用 ListView.builder 并显示“ListView.builder(itemBuilder: null)”
- angular - Angular是外部库导入一次吗?
- javascript - AJAX 调用只调用一个下拉列表的数据,而不是两个下拉列表
- ios - App Rejected: No InApp-Purchases available - 如何设置沙盒 InApp-Purchases?
- php - 每当我的代码中有样式或包含任何带有 css / 样式的内容时,就会弹出奇怪的 HTML