Bootstrap Modal在Django模板中没有显示

Question

我花了太多时间来解决这个问题。有人知道为什么这个模态不会弹出吗?

似乎，如果我删除表(这占用了大部分代码)，模态然后工作良好。如果我删除CSS，模态仍然不起作用。

不要评判它是否可怕，2周前才开始学习Django, HTML等😛

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block head %}
<style>
.teacher-list {
margin-left: 200px;
height: 100%;
width: 350px;
position: fixed;
overflow:hidden; 
overflow-y:scroll;
border-right: 1px solid;
border-color: #d3d3d3;
}
.teacher-list-title {
line-height: 1.3;
height: 4px;
}
.teacher-list-text {
line-height: 1.3;
padding-bottom: 0px;
font-weight: normal;
height: 4px;
}
.teacher-body {
padding-left: 570px;
padding-top: 10px;
text-align: center;
}
.icon-only-button {
background: transparent;
border: none !important;
padding: 0 0 0 0;
}
.search input {
padding-left: 10px;
height: 30px;
width: 220px;
border: none;
}
.line {
margin-left: 550px;
width: 100%;
border-bottom: 1px solid black;
position: absolute;
}
</style>
{% endblock %}
{% block content %}
<div class="teacher-list">
<table class="table">
<tbody>
<tr class="search">
<form method="GET" name="search">
<th scope="row">
<input name="search" type="search" placeholder="Search.." value="{{ search_text }}">
</th>
</form>
<td>
<button type="button" class="icon-only-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16"><path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/></svg>
</button>
</td>
</tr>
{% for instance in teachers %}
<tr>
<th scope="row">
<p class="teacher-list-title">{{ instance.fullname }}</p>
<p class="teacher-list-text">{{ instance.school }}</p>
</th>
<td>
<form method="GET" class="form-group" name="select_teacher">
<button class="icon-only-button" type="submit" name="select_teacher" value="{{ instance.pk }}">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if selected_teacher != "" %}
<div class="teacher-body">
<h1>{{ selected_teacher.fullname }}</h1>
<form method="POST" class="form-group" name="delete_teacher">
{% csrf_token %}
<button onclick="return confirm('Are you sure you want to delete {{ selected_teacher.fullname }}?');" class="icon-only-button" type="submit" name="delete_teacher" value="{{ selected_teacher.pk }}">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>
</button>
</form>
</div>
<div class="line"></div>
<div class="teacher-body">
<form method="POST" class="form-group" name="new_teacher">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" name="new_teacher" class="btn btn-success">Create</button>
</form>
</div>
{% endif %}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock %}

引导注射:

<!doctype html>
<html lang="en">
<head>
{% block head %}
{% endblock %}
<style type="text/css">
.content {
padding-left: 220px;
padding-top: 10px;
}
.btn, btn-success {
background-color: #3c89d0 !important;
border-color: #1184e8 !important;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    <title>CT Behaviour Management</title>
</head>
<body>
{% include 'nav.html' %}
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

如果是4.0版本，在html中链接的是哪个版本

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

如果是5.0

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

在data-bs-dismiss data-bs-toggle data-bs-target中都有字母变化

所以根据你链接的引导版本改变它

Answer 2

解决的问题是，我发现我只引用了编译的Bootstrap CSS库，而不是JS库。确保你在你的文件中都有链接(如果你使用的是html头链接方法)。