Div 落后于另一个 div
Div goes behind another div
我刚开始使用 Bootstrap，我不明白为什么 div 落后于另一个 div。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran/ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="../Ran/ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="../Ran/ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning">
<div class="border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
<div class="border border-3 d-flex" id="info">
<p>h</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
网站图片。
https://prnt.sc/1y8001u
灰色边框在另一个边框后面 div。就是这个问题。
我多么想要它。
https://prnt.sc/1y806jh
我希望 div 居中，不是从开始，而是从侧边栏的右边框一直到右。
在class中添加行class并根据需要的配置在子div中添加列class，更多关于Grid System的信息，可以查看https:// www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran/ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="../Ran/ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="../Ran/ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="row">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
<div class="col border border-3" id="info">
<p>h</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
侧边栏有一个位置：绝对；因此另一个 div 放在侧边栏后面。
我让边栏和另一个 div 不发生碰撞。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
</head>
<body onload="randomran()" class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Narkotika/narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="d-flex flex-row">
<div class="">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
</div>
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="../../../js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body><script src="/node_modules/moment/moment.js"></script>
<p id="lagre"></p>
<p id="lagre01"></p>
<p id="lagre02"></p>
</html>
只有 div:
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
ID 为“info”的 div 覆盖了整个页面，但没有越过边栏和导航栏。然后将id为"info01"的div放在infodiv.
的中间
CSS:
#info {
min-height: 100%;
padding-top: 5%;
}
body 是 min-height 100vh。
我刚开始使用 Bootstrap，我不明白为什么 div 落后于另一个 div。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran/ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="../Ran/ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="../Ran/ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning">
<div class="border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
<div class="border border-3 d-flex" id="info">
<p>h</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
网站图片。 https://prnt.sc/1y8001u
灰色边框在另一个边框后面 div。就是这个问题。
我多么想要它。 https://prnt.sc/1y806jh
我希望 div 居中，不是从开始，而是从侧边栏的右边框一直到右。
在class中添加行class并根据需要的配置在子div中添加列class，更多关于Grid System的信息，可以查看https:// www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran/ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="../Ran/ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="../Ran/ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="row">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
<div class="col border border-3" id="info">
<p>h</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
侧边栏有一个位置：绝对；因此另一个 div 放在侧边栏后面。
我让边栏和另一个 div 不发生碰撞。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fauske Simulator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="../../../assets/css/style.css">
</head>
<body onload="randomran()" class="main-bg" scroll="no" style="overflow: hidden">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="../../../index.html">Fauske Smiulator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ran noen på gata
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="ran-privatperson.html">Ran en privatperson</a></li>
<li><a class="dropdown-item" href="ran-offentlig-person.html">Ran en offentlig person</a></li>
<li><a class="dropdown-item" href="ran-tilfeldig-gata.html">Ran en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel en bil
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-privatperson.html">Stjel fra en privatperson</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-bil-offentlig-person.html">Stjel fra en offentlig person</a></li>
<li><a class="dropdown-item" href="../Stjel bil/stjel-tilfeldig-gata.html">Stjel en tilfeldig på gata</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Stjel fra et hus
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-privat.html">Stjel fra et privat hus</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-offentlig.html">Stjel fra en offentlig byggning</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-gata.html">Stjel noe på gata</a></li>
<li><a class="dropdown-item" href="../Ran hus/stjel-hus-butikk.html">Stjel noe på fra en butikk</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Narkotika
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="../Narkotika/narkotika-traphouse.html">Hent varer fra TrapHouse</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-miks.html">Miks rusmidlene dine</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-ansett.html">Ansette dealere</a></li>
<li><a class="dropdown-item" href="../Narkotika/narkotika-selg-gata.html">Selg på gaten</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 profile-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="fas fa-user fa-fw"></i> Min profil</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sliders-h fa-fw"></i> Account</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="div-innpakning" class="d-flex flex-row">
<div class="">
<div class="col-3 border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar">
<ul class="nav flex-column text-white w-100">
<a href="#" class="nav-link h3 align-self-center text-white my-2">
Lager
</a>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
</li>
<li>
<li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
</li>
</ul>
</div>
</div>
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="../../../js/navbar.js"></script>
<script src="../../../js/sidebar.js"></script>
<script src="../../../js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body><script src="/node_modules/moment/moment.js"></script>
<p id="lagre"></p>
<p id="lagre01"></p>
<p id="lagre02"></p>
</html>
只有 div:
<div class="col d-flex justify-content-center align-content-center" id="info">
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
<p class="fs-1 text-center">Ran en privatperson.</p>
<div class="align-self-center justify-content-center">
<p class="fs-2 text-center">Hvem vil du rane?</p>
<div class="align-self-center">
</div>
</div>
<button onclick="randomran()" id="finn_ran" type="button" class="btn btn-secondary w-50 align-self-center">Finn ransoffer - Pris: 500kr</button>
<p id="ranoffer" class="align-self-center"></p>
<p class="fs-5 align-self-center" id="sjanse"></p>
<p class="fs-5 align-self-center" id="penger_nivå"></p>
<div class="form-check align-self-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="våpen()">
<label class="form-check-label" for="flexCheckDefault">
Vil du bruke et våpen? - Pris: 2 000kr
</label>
</div>
<button onclick="utfør_ran()" id="utfør_ran" type="button" class="btn btn-secondary w-50 align-self-center">Utfør ran</button>
</div>
</div>
ID 为“info”的 div 覆盖了整个页面，但没有越过边栏和导航栏。然后将id为"info01"的div放在infodiv.
的中间CSS:
#info {
min-height: 100%;
padding-top: 5%;
}
body 是 min-height 100vh。