1、方法one

思路概要：

1. 创建CSS自定义工具类，如ml-220p：margin-left:220px;
2. 使用JS绑定元素，控制相应元素增加和删除自定义的CSS工具类，达到预期视觉效果。
3. 不足之处是不够极客，完全可以用CSS控制的样式，需要JS来操作，多了一道手续，略显繁琐。

HTML部分：

<div class="container-fluid p-0 m-0"><div id="home_header" class="fixed-top ml-220p"><a class="btn btn-sm btn-primary" id="sidebar_toggle">收缩按钮</a>头部</div><div id="home_sidebar" class="float-left position-fixed vh-100 bg-dark w-220p"><div id="sidebar_logo" class="text-center lh-50p bg-dark border-bottom border-primary text-white">这里是一个图标</div><div id="sidebar_logo_mini" class="text-center lh-50p bg-dark border-bottom border-primary text-white d-none">图标</div></div><div id="home_body" class="row float-left mt-50p ml-220p"><div class="col-12">12312312312312312</div></div><div id="home_footer"></div>
</div>

CSS部分：

#home_header{height:50px;line-height: 50px;background: #97b99e;z-index: 1000;
}#home_sidebar{z-index: 1001;
}
.ml-60p{margin-left: 60px}
.ml-220p{margin-left: 220px}
.w-60p{width: 60px;}
.w-220p{width: 220px;}
.mt-50p{margin-top: 50px;}
.lh-50p{height: 50px;line-height: 50px;}

JS部分

let home_base_script = function(){let initSidebarToggle = function () {//侧边栏收缩切换器$("#sidebar_toggle").click(function () {//动画效果 animate 有空再添加。$("#home_header").toggleClass("ml-220p").toggleClass("ml-60p"); // 头部缩进$("#home_body").toggleClass("ml-220p").toggleClass("ml-60p");   // 主体缩进$("#home_sidebar").toggleClass("w-220p").toggleClass("w-60p");  // 侧边栏缩进$("#sidebar_logo").toggleClass("d-none");       // 侧边栏logo缩进$("#sidebar_logo_mini").toggleClass("d-none");  // 侧边栏login缩进})};return {init:function () {initSidebarToggle()}}
}();$(document).ready(function () {home_base_script.init()
});

2.2 细节说明：

就是JS，控制增加删除自定义CSS类，控制侧边栏缩进，和右侧主体body缩进，来实现的。但是随着时间的前进。我感觉非常不舒服。希望能更多由CSS自身实现。于是有了方法Two。

方法TWO的链接