纯CSS实现Bootstrap navbar-toggler需用checkbox+label模拟点击：默认.navbar-collapse设display:none，小屏下通过#nav-toggle:checked ~ .navbar-collapse显示；按钮仅小屏可见；用max-height过渡替代height，确保iOS兼容；DOM中input必须在label和菜单前且无空格干扰。
怎么用纯CSS模拟Bootstrap的navbar-toggler行为
不依赖JavaScript，只靠@media和display切换就能实现折叠/展开效果，关键是控制「小屏隐藏导航项、大屏显示」+「按钮仅在小屏可见」。
常见错误是只写了@media但忘了给导航容器设display: none初始状态，导致小屏下菜单项仍占位或重叠。
- 导航容器（如
.navbar-collapse）默认设display: none，再在@media (min-width: 768px)里改回display: flex - 折叠按钮（
.navbar-toggler）默认display: block，在大屏媒体查询中设为display: none - 别用
visibility: hidden替代display: none——它仍占布局空间，点不到背后的元素 - 如果用了
flex布局，注意flex-direction在小屏下建议设为column，避免换行错乱
为什么点击按钮没反应？缺了这个关键前提
纯CSS无法监听点击事件，所以「点击展开」必须借助 + label + :checked伪类来模拟开关逻辑。这是最轻量且兼容IE9+的做法。
容易被忽略的是label的for属性必须精确匹配input的id，否则点击无效；同时input必须放在label之前（或用position: absolute藏掉但保留在DOM流中），否则:checked ~ .navbar-collapse选择器会失效。
-
放在最前面，不可display: none（可用position: absolute; opacity: 0隐藏） -
包裹图标或文字，负责触发 - 目标菜单用
#nav-toggle:checked ~ .navbar-collapse控制显隐，注意是~（通用兄弟选择器），不是+
移动端点击穿透或滚动卡顿怎么办
折叠菜单展开后，若内容高度突变，可能引发iOS Safari的滚动错位或点击穿透（点到背后固定定位的元素）。根本原因是height从0到auto无法过渡，强行加transition会失效。
- 改用
max-height做过渡：初始设max-height: 0，展开时设一个足够大的值（如max-height: 500px），配合overflow: hidden - 避免在
.navbar-collapse上写position: fixed或transform，这会让iOS视口计算异常 - 如果菜单含
dropdown子项，确保子菜单也用max-height而非display控制，否则过渡不连贯
Firefox下:checked ~不生效的兼容细节
Firefox对兄弟选择器的解析更严格：如果input和目标元素之间插入了注释、文本节点或<script></script>标签，~就会断开。实际项目中常因模板引擎注入空格或换行导致失效。
- 把
input、label、.navbar-collapse写在连续HTML行内，中间不要有换行或空格 - 或者改用相邻兄弟选择器
+，但需调整结构：让label紧邻.navbar-collapse，再用#nav-toggle:checked + label + .navbar-collapse - 测试时直接查看Elements面板，确认
:checked状态是否真实触发，排除JS干扰
事情说清了就结束。真正难的不是写对那几行@media，而是处理好input与label的绑定关系、兄弟选择器的DOM顺序、以及max-height过渡值的合理预估——这三个地方出问题，样式看起来完全正常，但就是不工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
