bootstrap 导航栏固定后，内容被遮盖的解决方案

场景

使用 bootstrap4 的固定导航栏时，内容被遮盖
无论是bootstrap3 还是bootstrap4，左侧导航栏还是顶部导航栏

<nav class="side-navbar fixed-top">

解决方案

网上说了很多，无非是增加内边距或者外边距，但因为网页是响应式的，将边距写死肯定不是一种优秀的解决方案。
因此 Google 了 Stackoverflow上的解决方案。

解决方案一

如下图

 

简而言之，就是在原有的固定的导航栏的代码前面定义一个空的导航栏，让这个空的导航栏去占据固定的导航栏的位置，这样就不用担心页面伸缩的问题了。

 <nav class="side-navbar"></nav>
 <nav class="side-navbar fixed-top">
     ...
     ...
 </nav>

    1
    2
    3
    4
    5

简单，但不够优雅。

解决方案二

大概意思就是在加载网页或者网页大小发生变化的时候，给被遮盖的元素设定边距，这个边距不是固定死的，而是在每次页面大小发生变化时根据 bootstrap 的 导航栏的样式（宽度或高度）来的。对于固定的顶部导航栏，那就是top，对于固定的侧边导航栏，那就是width。
因为我这里是左侧导航栏，所以我最终是这样写的

    var onResize = function() {
        // apply dynamic padding at the top of the body according to the fixed navbar height
        $("body").css("padding-left", $(".side-navbar").width());
    };

    // attach the function to the window resize event
    $(window).resize(onResize);

    // call it also when the page is ready after load or reload
    $(function() {
        onResize();
    });

很明显这种解决方案更加专业、合理。

最终效果