twitter-bootstrap - Bootstrap 4 固定顶部导航和固定侧边栏

Question

这是一个很好的例子，展示了如何创建带有侧边栏的导航栏。任何人都可以修改代码，以便顶部导航是顶部固定的，侧边栏是固定/静态的，只有主页内容滚动？我可以通过分配 class="fixed-top" 使导航成为顶部固定的导航。到nav ，但我不知道如何固定侧边栏，使其保持在同一个位置，而不是随着主页内容向上滚动。申请class="sticky-top"到侧边栏似乎不起作用。

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
        <ul class="list-group sticky-top">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

https://www.codeply.com/go/LFd2SEMECH

Answer 1

sticky-top正在工作，但它似乎没有工作有两个原因......

主内容区内容不足，无法滚动

它位于 top:0所以它隐藏在固定导航栏后面

添加 CSS 以偏移侧边栏的顶部(与固定导航栏的高度相同)。

.sticky-offset {
    top: 56px;
}

<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>

然后，在主区域添加足够的内容(或高度)，以便滚动是必要的......

工作演示: https://www.codeply.com/go/7XYosZ7VH5

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
        <ul class="list-group sticky-top sticky-offset">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>