我目前正在使用Bootstrap 5.3.1的嵌套导航来制作一个简单的 Jmeter 板。我注意到当我有很多内容时，我再也看不到导航了。这就是为什么我希望导航的左侧是粘性的，这样当我向下滚动时，它将始终在屏幕上。
我已经试过一些方法了，但对我没用。下面是我当前代码的一个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test pagina | Wolkie</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end position-sticky">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#my-services">My Services</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#domains">Domains</a>
<a class="nav-link ms-3 my-1" href="#hosting">Hosting</a>
<a class="nav-link ms-3 my-1" href="#transfer">Transfer</a>
</nav>
<a class="nav-link" href="#my-profile">My Profile</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#account-details">Account Details</a>
<a class="nav-link ms-3 my-1" href="#change-password">Change Password</a>
<a class="nav-link ms-3 my-1" href="#newsletter">Newsletter</a>
</nav>
<a class="nav-link" href="#billing">Billing</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#overview">Overview</a>
<a class="nav-link ms-3 my-1" href="#payment-details">Payment Details</a>
</nav>
<a class="nav-link" href="#status">Status</a>
<a class="nav-link" href="#logout">Logout</a>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="my-services">
<h4>My Services</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="domains">
<h5>Domains</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="hosting">
<h5>Hosting</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="transfer">
<h5>Transfer</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="my-profile">
<h4>My Profile</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="change-password">
<h5>Change Password</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="newsletter">
<h5>Newsletter</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="billing">
<h4>Billing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="overview">
<h5>Overview</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="payment-details">
<h5>Payment Details</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="status">
<h4>Status</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<div id="logout">
<h4>Logout</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
2条答案
按热度按时间bvuwiixz1#
删除
h-100 align-items-stretch并定义粘滞位置sticky-topwpx232ag2#
我打开了一个属性样式，传递了overflow-y：scroll属性，然后将大小设置为600 px，这样两列的大小基本相同（注意：为了获得更好的体验，让我们直接在导航器上进行调试）！！