python bootstrap container宽度_使用Boostrap，左侧菜单栏固定宽度，右侧自适应宽度。...

1、方法one

思路概要：

创建CSS自定义工具类，如ml-220p：margin-left:220px;

使用JS绑定元素，控制相应元素增加和删除自定义的CSS工具类，达到预期视觉效果。

不足之处是不够极客，完全可以用CSS控制的样式，需要JS来操作，多了一道手续，略显繁琐。

HTML部分：

收缩按钮

头部

这里是一个图标

图标

12312312312312312

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。