专业的多语种建站服务商

搜索

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

场景

使用 bootstrap4 的固定导航栏时,内容被遮盖

无论是bootstrap3 还是bootstrap4,左侧导航栏还是顶部导航栏


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


解决方案

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

因此 Google 了 Stackoverflow上的解决方案。


解决方案一


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


 <nav class="side-navbar"></nav>

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

  ...

  ...

 </nav>


简单,但不够优雅。


解决方案二


大概意思就是在加载网页或者网页大小发生变化的时候,给被遮盖的元素设定边距,这个边距不是固定死的,而是在每次页面大小发生变化时根据 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();

    });

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

点击这里给我发消息
由Sleda多语种建站系统提供 - Sleda