当我使用bootstrap 5 toast时，它会推下整个身体，我相信我的相对和绝对位置属性出错了，但我不确定。我第一次使用堆栈溢出，所以我有点不确定，但这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<?php
require("functions.php");
if (isset($_GET['id'])){
$classinfo = getClassInfo($_GET['id']);
echo("<title>".$classinfo[0]["course_code"]."</title>");
}
else{
?>
<title>ERROR<title>
<?php
}
?>
</head>
<body style="margin: 0;">
<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/login/classes/api.php');
if (!$user->userAllowedAccess("progress_teacher")) {
//THEY ARE NOT ALLOWED HERE
header("location: /login/?p=login&l=/students-assign/19-Aslan/491819/project/teacherLandingPage.php");
}
$userEmail = $user->getEmail();
$userinfo = getCoursesbyEmail($userEmail);
if (isset($_GET['id'])){
$classinfo = getClassInfo($_GET['id']);
$commList = getCommentsbyId($userinfo[0]["teacher_id"]);
?>
<!-- Toast Saved Notification -->
<div style= "position: relative; margin: 0;">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" id="savedNotification" style="z-index:1;" >
<div>
<div class="toast-header">
<strong class="me-auto">System</strong>
<small class="text-muted">Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Data saved.
</div>
</div>
</div>
</div>
<div style="position: relative;">
<div class = "userDropdown">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn btn-primary" href="commentList.php?id=<?php echo($userinfo[0]["teacher_id"])?>" role="button"><span class="material-symbols-outlined">comment_bank</span></a>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="material-symbols-outlined">account_circle</span>
<?php echo($userinfo[1]["teacher_name"]); ?>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="teacherLandingPage.php">Home</a></li></a></li>
<li><a class="dropdown-item" href="/login/?p=login&l=/students-assign/19-Aslan/491819/project/"><span class="material-symbols-outlined">logout</span>Logout</a></li></a></li>
</ul>
</div>
</div>
</div>
</div>
<form name='classEval' method="post">
<div class = "container-md mt-5 mx-auto w-75">
<table class="table table-hover" >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" onclick="saveEvalData()" class="btn btn-success">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
</svg>
Save
</button>
</td>
</tr>
<tr class = "text-center align-middle">
<th scope="col"></th>
<th scope="col">Student Name</th>
<th scope="col">Comment</th>
<th scope="col">Level</th>
<th scope="col">Request Interview</th>
</tr>
<?php
foreach ($classinfo as $student){
$studentEval = getEvalId($_GET['id'], $student["stud_id"]); //input id and stud id to find user info for filling out the from
if (count($studentEval)== 0){
$studentEval["0"]["eval_comments"] = "";
$studentEval["0"]["eval_level"] = 0;
$studentEval["0"]["eval_interviewReq"] = 0;
}
?>
<tr>
<td class = "text-center align-middle">
<div class = "checkbox-lg">
<label class="checkbox-wrap checkbox-primary">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
</td>
<?php
echo("<td class = 'text-center align-middle'>".$student["stud_name"]."</td>");
?>
<td class = "text-center align-middle">
<div class="input-group mb-3 ">
<?php
echo('<input name="inputText_'.$student["stud_id"].'"id="inputText_'.$student["stud_id"].'"value ="'.$studentEval["0"]["eval_comments"].'" type="text" class="form-control" aria-label="Text input with dropdown button">')
?>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Comments</button>
<ul class="dropdown-menu dropdown-menu-end">
<?php
foreach($commList as $comm)
echo('<li><a onclick='addComment("inputText_'.$student["stud_id"].'","'.$comm['comm_value'].'");' class="dropdown-item" >'.$comm['comm_value'].'</a></li>');
?>
</div>
</td>
<td>
<?php
echo('<select class="form-select-sm" aria-label="Default select example" id = "level_'.$student["stud_id"].'" name = "level_'.$student["stud_id"].'">');
?>
<option <?php if ($studentEval["0"]["eval_level"] == 0) echo ("selected "); ?>value="0">Select</option>
<option <?php if ($studentEval["0"]["eval_level"] == 1) echo ("selected ");?>value="1">Needs Improvement</option>
<option <?php if ($studentEval["0"]["eval_level"] == 2) echo ("selected ");?>value="2">Approaching Expectations</option>
<option <?php if ($studentEval["0"]["eval_level"] == 3) echo ("selected ");?>value="3">Meeting Expectations</option>
<option <?php if ($studentEval["0"]["eval_level"] == 4) echo ("selected ");?>value="4">Exceeding Expectations</option>
</select>
</td>
<td class = 'text-center align-middle'>
<div class = "checkbox-lg">
<label class="checkbox-wrap checkbox-primary ">
<?php
echo(' <input type="checkbox" id = "intv_'.$student["stud_id"].'" name = "intv_'.$student["stud_id"].'"');
if ($studentEval["0"]["eval_interviewReq"] == 1)
echo (" checked >");
else
echo(">");
?>
<span class="checkmark"></span>
</label>
</div>
</td>
</tr>
<?php
}
?>
</table>
</div>
</form>
<?php
}else{
?>
<META http-equiv="refresh" content="2;URL=http://wcss.emmell.org/login/?p=login&l=/students-assign/19-Aslan/491819/project/teacherLandingPage.php">
<h2>ERROR: No selected course. Redirecting...</h2>
<?php
}
?>
<script>
var option = {
animation : true,
delay: 2000
};
function saveEvalData(){
var toastHTMLElement = document.getElementById("savedNotification");
var toastElement = new bootstrap.Toast(toastHTMLElement, option);
toastElement.show();
var courseId = <?php echo $_GET["id"]?>
let form = new FormData(document.forms.classEval);
let formData = new URLSearchParams(form).toString();
console.log(formData);
var xhttp = new XMLHttpRequest(); //Making a new request to another page
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { //If state is correct and it doesn't error (404)
if (this.responseText == 1) {
}
}
else if (this.readyState == 4) {
//error scenario
}
};
console.log("processData.php?id="+courseId+"&"+formData);
xhttp.open("GET", "processData.php?id="+courseId+"&"+formData); //Declaring the method and the file name of which we want to go to
xhttp.send(); //Sending to file
}
function addComment(textBoxId,text) {
if (document.getElementById(textBoxId).value != "")
document.getElementById(textBoxId).value += " " + text;
else
document.getElementById(textBoxId).value += text;
}
</script>
</body>
</html>
我已经检查了元素，并试图调整css样式，但似乎没有工作。当移除吐司时，它似乎工作得很好，位置也很好，但我不确定。感谢所有未来的帮助，并为混乱的代码感到抱歉，哈哈。
全部修复!div上的边距导致它推了整个body还是什么??这里使用的是mt-5类:
<form name='classEval' method="post">
<div class = "container-md mt-5 mx-auto w-75">
<table class="table table-hover" >
<tr>