为什么位置粘性在 Bootstrap 5.3.1 嵌套导航上不起作用？

问题描述 投票：0回答：1

我目前正在开发一个简单的仪表板，其中使用 Bootstrap 5.3.1 的嵌套导航。我注意到当我有很多内容时我就看不到导航了。这就是为什么我希望导航的左侧是粘性的，这样当我向下滚动时它总是在屏幕上。

我已经尝试过一些事情，但这对我来说没有成功。这是我当前代码的示例：

<!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>

html css twitter-bootstrap position bootstrap-5
1个回答
0
投票

删除 

h-100 align-items-stretch
并定义粘贴位置 
sticky-top

<!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="flex-column pe-4 border-end position-sticky sticky-top">
                    <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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.