css Bootstrap 5根据导航条高度向下推柱

xv8emn3q  于 2023-11-19  发布在  Bootstrap
关注(0)|答案(1)|浏览(90)

我如何根据导航栏的高度向下推最左边的列a position-fixed,其中有fixed-top
下面是我的HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <style>
        html,
        body {
            height: 100%!important;
        }
        .navbar-brand img {
            filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%);
        }
    </style>

    <style>
        .scrollable {
            overflow: hidden;
            height: 100%!important; /* Otherwise we have to use h-100 on the .scrollable section?!? */
        }

        .scrollable:hover {
            overflow: auto;
        }

        ::-webkit-scrollbar {
            width: 3px;
            height: 3px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-track {
            background-color: #FEFEFE;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #6c757d;
        }
    </style>

    <title>BS5 Layout</title>
</head>

<body class="bg-light">

    <header class="navbar navbar-light bg-light fixed-top p-0 border-bottom">
        <div class="col-12 col-md-3 col-lg-2">
            <a class="navbar-brand text-primary px-2" href="#">
                <img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy">
                Brand
            </a>
        </div>
        <nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
            <ol class="breadcrumb mt-3 px-2">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Contacts</a></li>
                <li class="breadcrumb-item active" aria-current="page">List</li>
            </ol>
        </nav>
    </header>

    <div class="container-fluid h-100">
        <div class="row h-100">
            <section class="h-100 col-md-3 col-lg-2 position-fixed p-0 scrollable">
                This won't scroll all the way to bottom?!?
                item<br>
                ...
                Last item
            </section>
            <section class="h-100 col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
                Repeat this content and navbar disappears after X number of scrolls<br>
                ...
                Last line<br>
            </section>
            <section class="h-100 col-md-4 col-lg-3 p-0 border-start">
                SIDE
            </section>
        </div>
    </div>

</body>
</html>

字符串
提前感谢:)

fhg3lkii

fhg3lkii1#

**正文填充是必需的,因为你的导航是固定的!**来自另一个引用旧版本文档的答案:

固定的导航条将覆盖您的其他内容,除非您在<body>的顶部添加填充。尝试您自己的值或使用我们下面的片段。提示:默认情况下,导航条为50 px高。

body { padding-top: 70px; }

字符串
在bootstrap stuff!Working democode之后包含这一行!

相关问题