代码:链接到JSfiddle中的示例代码
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style type="text/css">
#mynetwork {
height :650px;
border: 1px solid lightgray;
};
</style>
<title>Sample</title>
</head>
<body>
<div class="container-fluid">
<!-- Content here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Sample</a>
<form class="d-flex" onsubmit="event.preventDefault();alert('Not found','warning');">
<input class="form-control me-2" id="job_search" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" >Search</button>
</form>
</div>
</nav>
<div id="liveAlertPlaceholder" class="position-absolute"></div>
<div id="mynetwork"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<script type="text/javascript">
var alertPlaceholder = document.getElementById('liveAlertPlaceholder');
function alert(message, type) {
var wrapper = document.createElement('div');
wrapper.innerHTML = '<div id="alert" class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
alertPlaceholder.append(wrapper);
const alert = document.querySelector("#alert");
// Create Bootstrap alert instance
const bsAlert = new bootstrap.Alert(alert);
// Dismiss time out
setTimeout(() => {
bsAlert.close();
}, 2000);
};
</script>
</body>
</html>
我试图在bootstrap中使用alert类，当它显示时，下面的内容被下推。我用class="position-absolute"它部分地解决了这个问题。现在它显示在我的网络上方的左上角。是否有可能在使用绝对位置之前显示容器的全宽度警报?
我使用了一个固定的高度为我的网络，因为我不能使它自动采取浏览器的大小。我的计划是在这里面使用visjs。在Visjs的高度参数中有一个bug，因此我在这里硬编码了高度。
如果你给你的警报使用css的绝对/固定位置，你可以指定一个z值，这将使它出现在内容的顶部，而不是插入和推下内容的层。像这样:
.flash-messages {
position: fixed;
z-index: 1010;
top: 3rem;
right: 1rem;
left: 1rem;
text-align: center;
margin-top: 1rem;
}