Question

长话短说：我正在使用 SB Admin 2 模板构建一个网站，并进行了一些小的修改，我想要更改的一件事是固定左侧边栏，以便在滚动时保持原位。将 .position-fixed 添加到主 UL 包装器就是这样做的，但同时它会导致紧随 UL 的 #content-wrapper div 跨越页面的整个宽度并与侧边栏重叠。我已经为 #content-wrapper 使用了 margin-left 值，但它太依赖于屏幕分辨率。另外，我希望内容包装器在侧边栏折叠时展开，就像在 vanilla 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">

Answer 1

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

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

Bootstrap 4：固定位置侧边栏与内容重叠

1 个答案: