Bootstrap 4 固定顶部导航和固定侧边栏 [英] Bootstrap 4 fixed top nav and fixed sidebar

查看：44
本文介绍了Bootstrap 4 固定顶部导航和固定侧边栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个很好的示例，说明如何创建带有侧边栏的导航栏.任何人都可以修改代码，以便顶部导航固定在顶部，侧边栏固定/静态，只有主页内容滚动?我可以通过将 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>菜单项..</li><li>菜单项..</li>

<div class="col"><!-- 主要-->

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

解决方案

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

  1. 主内容区域的内容不足，无法滚动
  2. 它位于 top:0 所以它隐藏在固定的导航栏后面

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

.sticky-offset {顶部: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-topsticky-offset"><li>菜单项..</li><li>菜单项..</li>

<div class="col"><!-- 主要-->

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

解决方案

The sticky-top is working, but it doesn't appear to be working for two reasons...

  1. There isn't enough content in the main content area to scroll
  2. It's positioned at top:0 so it hides behind the fixed navbar

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

Working Demo: 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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆