Bootstrap 4固定顶部导航和固定侧栏 [英] Bootstrap 4 fixed top nav and fixed sidebar
问题描述
这是一个如何使用边栏创建导航栏的好例子.任何人都可以修改代码,以使顶部导航固定在顶部,而侧边栏仅在滚动主页内容的情况下是固定/静态的吗?我可以通过将class="fixed-top"
分配给nav
来使导航栏最固定,但是我无法弄清楚如何固定侧边栏,使其保持在同一位置,而不是向上滚动主栏.页面内容.将class="sticky-top"
应用于侧边栏似乎无效.
This is a great example of how to create a navbar with a sidebar. Can anyone modify the code so that the top nav is top-fixed and the sidebar fixed/static with only the main page content scrolling? I can make the nav the nav top-fixed by assigning the class="fixed-top"
to the nav
, but I can't figure out how to make the sidebar fixed so that it remains in the same spot instead of scrolling up with the main page content. Applying class="sticky-top"
to the sidebar doesn't seem to work.
<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
推荐答案
sticky-top
正在工作,但是由于两个原因,它似乎没有工作...
The sticky-top
is working, but it doesn't appear to be working for two reasons...
- 主要内容区域中没有足够的内容来滚动
- 它位于
top:0
处,因此隐藏在固定的导航栏后面
- There isn't enough content in the main content area to scroll
- It's positioned at
top:0
so it hides behind the fixed navbar
添加CSS以补偿边栏的顶部(与固定导航栏的高度相同).
Add CSS to offset the top of the sidebar (the same as height of fixed navbar).
.sticky-offset {
top: 56px;
}
<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>
然后,在主区域中添加足够的内容(或高度),以便有必要进行滚动...
And, then add enough content (or height) in the main area so that scrolling is necessary...
正在运行的演示: 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>
这篇关于Bootstrap 4固定顶部导航和固定侧栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!