响应式侧边栏折叠通过CSS媒体查询、Flexbox布局和JS类切换实现。默认侧边栏宽250px，点击按钮触发collapsed类，宽度变为60px，文字隐藏；结合transition实现动画效果。@media (max-width: 768px)时，移动端默认折叠，主内容区适配margin。关键细节包括overflow: hidden与white-space: nowrap，防止文本溢出，确保收起状态美观稳定。结构清晰，兼容性强，适用于管理后台等多场景。
响应式侧边栏折叠的关键在于结合 CSS 媒体查询、Flexbox 布局和状态切换类，实现在不同屏幕尺寸下自动或手动收起侧边栏。下面是一种实用且简洁的实现方式。
使用一个包含侧边栏和主内容区的容器，通过 Flexbox 实现横向排布：
<div class="layout">
<aside class="sidebar" id="sidebar">
<div class="menu-item">首页</div>
<div class="menu-item">设置</div>
<div class="menu-item">帮助</div>
</aside>
<main class="content">
<button onclick="toggleSidebar()">☰ 菜单</button>
<h1>主内容区</h1>
</main>
</div>
设置侧边栏默认宽度，在小屏幕上隐藏文字只保留图标，或完全收起：
.sidebar {
width: 250px;
background: #333;
color: white;
transition: width 0.3s ease;
overflow: hidden;
}
.sidebar.collapsed {
width: 60px;
}
.sidebar .menu-item {
padding: 15px 20px;
text-align: center;
font-size: 14px;
}
.sidebar.collapsed .menu-item {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
}
在移动端屏幕下，默认折叠侧边栏，并适配主内容区域：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.sidebar {
width: 60px;
}
.sidebar .menu-item {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
}
.content {
margin-left: 60px;
}
}
添加简单的脚本控制切换类名：
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('collapsed');
}
点击按钮后，侧边栏会在 250px 宽（展开）和 60px 宽（折叠）之间切换，文字随之隐藏或显示。配合 transition 属性，动画平滑自然。
基本上就这些。通过 CSS 控制布局与动画，JS 只负责切换类，结构清晰，兼容性好，适合大多数管理后台或移动适配场景。不复杂但容易忽略细节，比如 overflow: hidden 和 white-space 的处理，确保文字不会撑破折叠状态。
以上就是如何通过css实现响应式侧边栏折叠的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
123
收藏
