Javascript 加载引导4 css时，侧栏导航折叠显示空白屏幕

我正在尝试用折叠做侧导航栏。因此，我加入了

jquery3.4.1

和CSS。但是当

bootstrap4css

和

bootstrapjs

添加页面变成白色屏幕时。在控制台中不会出现错误。删除引导后，它工作正常。但引导是必不可少的。因此，JS、CSS、JSP已包含在内，供您参考。请帮我做这件事

$（文档）.ready（函数（）{
$（“.hamburger”）。单击（函数（）{
$（“.wrapper”）.toggleClass（“折叠”）；
});
});
@导入url（'https://fonts.googleapis.com/css?family=Montserrat:400，600700&display=swap'）；
*{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
}
身体{
背景：#e1ecf2；
}
.包装纸{
利润率：10px；
}
.wrapper.top_导航栏{
宽度：84%；
高度：60px；
显示器：flex；
位置：固定；
顶部：10px；
过渡：所有0.3秒缓解；
}
.wrapper.collapse.top_导航栏{
宽度：92.5%；
高度：60px；
显示器：flex；
位置：固定；
顶部：10px；
}
.包装纸.顶条.汉堡包{
宽度：70px；
身高：100%；
背景：#33AAAA；
填充：25px 25px；
/*边框左上半径：20px*/
光标：指针；
}
.包装纸。汉堡部{
宽度：35px；
高度：4px；
背景#92a6e2；
保证金：5px0；
边界半径：5px；
}
.wrapper.top\u导航栏.top\u菜单{
宽度：100%；
身高：100%；
背景：线性梯度（向右，#33AAAA，#80C477）；
/*边框右上角半径：20px*/
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0 20px；
盒影：0 1px 1px rgba（0,0,0,0.1）；
}
.wrapper.top_导航栏.top_菜单.徽标{
颜色：白色；
字体大小：20px；
字号：700；
字母间距：3px；
}
.wrapper.top_导航栏.top_菜单ul{
显示器：flex；
}
.wrapper.top_导航栏。top_菜单ul li a{
显示：块；
利润率：0.10px；
宽度：35px；
高度：35px；
线高：35px；
文本对齐：居中；
边框：1px纯白；
边界半径：50%；
颜色：白色；
}
.wrapper.top_导航栏。top_菜单ul li a:悬停{
背景#4360b5；
颜色：#fff；
}
.wrapper.top_导航栏。top_菜单ul li a:悬停i{
颜色：#fff；
}
.wrapper.sidebar{
位置：固定；
左：10px；
背景：线性梯度（#80C477，#33AAAA）；；
宽度：200px；
高度：计算（100%-20px）；
/*边框左下半径：20px*/
过渡：所有0.3秒缓解；
利润上限：-60px
}
.wrapper.sidebar ul li a{
显示：块；
填充：20px；
颜色：#fff；
位置：相对位置；
边缘底部：1px；
颜色：白色；
空白：nowrap；
}
侧边栏ul li a：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：3倍；
身高：100%；
背景#92a6e2；
显示：无；
}
.wrapper.sidebar ul li a span.icon{
右边距：10px；
显示：内联块；
}
.wrapper.sidebar ul li a span.title{
显示：内联块；
}
.包装器.侧栏ul li a:悬停，
.wrapper.sidebar ul li a.active{
背景#4360b5；
颜色：#fff；
}
.wrapper.sidebar ul li a:悬停：在，
.wrapper.sidebar ul li a.active:之前{
显示：块；
}
.wrapper.main_容器{
宽度：（100%-200px）；
利润上限：70像素；
左边距：200px；
填充：15px；
过渡：所有0.3秒缓解；
}
.wrapper.主容器.项目{
背景：#fff；
边缘底部：10px；
填充：15px；
字体大小：14px；
线高：22px；
}
.wrapper.collapse.sidebar{
宽度：70px；
}
.wrapper.collapse.sidebar ul li a{
文本对齐：居中；
}
.wrapper.collapse.sidebar ul li a span.icon{
保证金：0；
}
.wrapper.collapse.sidebar ul li a span.title{
显示：无；
}
.wrapper.collapse.main_容器{
宽度：（100%-70px）；
左边距：70像素；
}

响应侧导航栏









标志





按此顺序放置脚本，不要忘记将重要规则放置到css中，这些规则可能会覆盖某些默认引导css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>


感谢您的回复。仍然面对着同样的问题issue@vijaykumarg你能给你的网站的网址，如果它是在登台服务器或现场？这是在我的本地system@vijaykumarg可以我会尝试在我的本地网站上重新创建这个问题，如果我找到了，我会发布一个答案