时间戳

首页 > 解决方案 > Bootstrap 4：内容重叠的固定位置侧边栏

css - Bootstrap 4：内容重叠的固定位置侧边栏

问题描述

长话短说：我正在使用 SB Admin 2 模板构建一个网站，并进行了一些小的修改，我想要更改的一件事是固定左侧边栏，以便在滚动时保持原位。将 .position-fixed 添加到主 UL 包装器就可以做到这一点，但同时它会导致紧跟 UL 的 #content-wrapper div 跨越页面的整个宽度并与侧边栏重叠。我已经为#content-wrapper 使用了margin-left 值，但它太依赖于屏幕分辨率。另外，我希望在侧边栏折叠时扩展内容包装器，就像在香草 SB Admin 2 中一样。任何提示都表示赞赏。侧边栏和内容包装类目前如下：

<ul class="navbar-nav bg-gradient-secondary sidebar sidebar-dark accordion position-fixed" id="accordionSidebar">

<div id="content-wrapper" class="d-flex flex-column">

标签： cssbootstrap-4flexbox

解决方案

美好的。通过在 CSS 中添加 #wrapper #content-wrapper {margin-left: 14rem;} 并为侧边栏折叠按钮编写这段 jQuery 自己解决了这个问题。似乎在所有分辨率下都能完美运行：

    $('#sidebarToggle').click( function(e) {
      if ($("#accordionSidebar").hasClass("toggled")) {
       $('#content-wrapper').css({'margin-left': "6.5rem"});
     } else {
       $('#content-wrapper').css({'margin-left': "14rem"});
     }
    });

推荐阅读