我使用Bootstrap 5，试图使响应卡广告。由于某些原因，粘顶不能工作。
我想在左边创建一个粘边栏。侧边栏菜单位于网格列内。我正在使用这个问题中所示的sticky-top类，但它仍然不起作用。
这是我的代码:我不知道粘顶有任何可能的碰撞。
<!Docktype html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<title>Selda</title>
</head>
<body class="bg-light d-flex flex-column min-vh-100" data-new-gr-c-s-check-loaded="8.904.0" data-gr-ext-installed="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Selda</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">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learning</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About-US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact-US</a>
</li>
</ul>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container min-vh-100">
<div class="row">
<div class="col-lg-8 mb-3">
<div class="card">
<div class="card-header" style="height: 90px"></div>
<div class="card-body">
<div class="d-block d-md-flex mb-3">
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" class="rounded-circle img-thumbnail">
<div class="text-center">
<span class="badge bg-success">Online</span>
</div>
</div>
<h1 class="h5">
<i class="fa-solid fa-circle-check text-success"></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="menu sticky-top">
<div class="card">
<div class="card-body">
<h6 class="card-title">Plan</h6>
</div>
<ul class="list-group">
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-file-pdf"></i>
<span>Download PDF</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-photo-film"></i>
<span>Download Video</span>
</div>
<span class="badge bg-primary rounded-pill">85,000 $</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-book"></i>
<span>Download Word</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-lg w-100">Payment</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js "></script>
</body>
</html>
menudiv是我想在用户向下滚动时粘贴到顶部的div。
问题是元素只粘附到它们的父元素上，所以菜单留在列内。你应该把你的页面分成两个大的栏:一个用于所有其他的行/列，另一个用于你的侧边栏，它将一直贴在顶部。试试这个(尽管由于嵌套行，您可能需要更改一些填充/边距):
<div class="container min-vh-100">
<div class="row">
<div class="col-lg-8 mb-3">
<div class="row">
<div class="col-12"></div>
<div class="card">
<div class="card-header" style="height: 90px"></div>
<div class="card-body">
<div class="d-block d-md-flex mb-3">
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" class="rounded-circle img-thumbnail">
<div class="text-center">
<span class="badge bg-success">Online</span>
</div>
</div>
<h1 class="h5">
<i class="fa-solid fa-circle-check text-success"></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<h6 class="card-title">About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h6 class="card-title">My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="menu sticky-top">
<div class="card">
<div class="card-body">
<h6 class="card-title">Plan</h6>
</div>
<ul class="list-group">
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-file-pdf"></i>
<span>Download PDF</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-photo-film"></i>
<span>Download Video</span>
</div>
<span class="badge bg-primary rounded-pill">85,000 $</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-book"></i>
<span>Download Word</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-lg w-100">Payment</button>
</div>
</div>
</div>
</div>
</div>
</div>