如何将屏幕分辨率<992px时折叠的导航栏宽度设为25%？

嘿，针对你说的屏幕宽度小于992px时折叠导航栏占满整个屏幕的问题，我给你整理了个简单的CSS解决方案，直接自定义媒体查询就能搞定：

• 首先，找到你项目里折叠导航的容器（一般Bootstrap项目里是.navbar-collapse，如果是自定义结构就换成对应类名），然后添加下面的媒体查询代码：

@media (max-width: 991px) {
  .navbar-collapse {
    width: 25%;
    /* 让导航栏固定在侧边并占满高度，可选但推荐 */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: #ffffff; /* 匹配你原导航的背景色 */
    padding: 1.5rem; /* 给内容留点空间，避免贴边 */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 加个阴影和主内容区分开 */
  }
}

• 另外，如果你用了导航折叠按钮（比如汉堡按钮），记得给它加个层级，避免被侧边导航挡住：

@media (max-width: 991px) {
  .navbar-toggler {
    position: relative;
    z-index: 1000; /* 确保按钮始终在最上层 */
  }
}

小提示 #

• 如果想让导航从右侧滑出，把left: 0改成right: 0就行。
• 要是你的导航容器不是.navbar-collapse，一定要替换成你实际的类名或选择器，不然代码不会生效哦。
• 最后记得在不同小屏幕设备上测试一下，确保布局不会出现内容被遮挡或者错位的情况。

内容的提问来源于stack exchange，提问作者Rehan