使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。

最新推荐文章于 2025-06-26 09:20:32 发布

weixin_34288121

最新推荐文章于 2025-06-26 09:20:32 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/asktao/blog/3002320

本文介绍了如何使用Bootstrap V4实现左侧菜单栏在不同屏幕尺寸下的自适应缩进效果，通过JavaScript监听窗口resize事件及修改<body>类来控制侧边栏状态。详细讲述了HTML结构、JavaScript代码和CSS样式的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

这个记录算是这段时间的一个总结吧。折腾了页面样式果然让人反复纠结。

思路概要：

使用.body-small，代表屏幕处于小分辨率下。用JQ的resize()方法监听。并在<body>处增加或删除。
使用.mini-sidebar，代表侧边栏处于收缩状态下。（ .body-small 和 .mini-sidebar同时存在时，代表小分辨率下菜单收缩）
开始干活，根据<body>标签的class类，编写每个状态下对应的CSS样式。

HTML：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendors/font-awesome/css/font-awesome.css" rel="styleshee