加载bootstrap 4CSS时，SideBar导航折叠显示空白屏幕

可能是由以下原因导致的：

1. 缺少引入必要的JavaScript文件：在使用bootstrap 4的折叠导航功能时，需要确保已正确引入jQuery库和bootstrap.min.js文件。这两个文件是实现折叠导航所必需的。请检查你的代码中是否正确引入了这两个文件。
2. 错误的HTML结构或class命名：检查你的HTML结构和class命名是否符合bootstrap 4的要求。折叠导航需要特定的class命名和正确的HTML结构才能正常工作。请确保你的代码中包含了正确的class命名和HTML结构。
3. 其他的样式冲突：有时候，页面中的其他样式可能与bootstrap的CSS冲突，导致折叠导航无法正确显示。这可能是由于命名冲突或样式覆盖引起的。尝试检查并解决与bootstrap样式相关的冲突。

解决这个问题的方法如下：

1. 确保正确引入jQuery库和bootstrap.min.js文件。可以使用CDN链接或下载这些文件并放置在正确的路径下。
2. 检查你的HTML结构和class命名是否正确。可以参考bootstrap 4文档中关于折叠导航的示例代码，确保你的代码结构与示例相符。
3. 如果遇到样式冲突，可以使用浏览器的开发者工具检查具体的样式规则和冲突点。根据需要，可以修改自定义样式或使用更具体的class来解决冲突。

推荐的腾讯云产品：腾讯云Web+产品系列。Web+是腾讯云提供的一站式Web服务，可以帮助开发者快速搭建和部署网站、应用和服务。其中包含了云托管、云容器服务、云函数、Serverless Framework等产品，适用于前端开发、后端开发和部署运维等各个环节。你可以在腾讯云官网的Web+产品介绍页面了解更多详细信息：腾讯云Web+