引入Bootstrap 5后侧边栏向右偏移的修复方案咨询

问题情况 #

引入Bootstrap 5库后，侧边栏出现向右偏移的异常，对比效果如下：

• 引入Bootstrap前：
  
• 引入Bootstrap后：
  

原代码 #

CSS代码（含语法错误） #

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif;}
body: body { position: relative; min-height: 100vh; width: 100%; overflow: hidden;}
sidebar: .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 240px; background: #11101d; padding: 6px 14px; transition: all 0.5s ease;}
sidebar-active: .sidebar .active { width: 240px;}
sidebar ul li: .sidebar ul li { position: relative; height: 50px; width: 100%; margin: 0 5px; list-style: none; line-height: 50px;}
input: .sidebar ul li input { position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-radius: 12px; outline: none; border: none; background: #1d1b31; padding-left: 50px; font-size: 18px; color: #fff;}
search icon: .sidebar ul li .bx-search { position: absolute; z-index: 99; color: #fff; font-size: 22px;}
ul li a: .sidebar ul li a { color: #fff; display: flex; align-items: center; text-decoration: none; transition: all 0.4s ease; border-radius: 12px;}
ul li a hover: .sidebar ul li a:hover { color: #11101d; background: #fff;}}
ul li i: .sidebar ul li i { height: 50px; min-width: 50px; border-radius: 12px; line-height: 50px; text-align: center;}

HTML代码 #

<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Sinema Yönetim | Personel</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> 
    <!-- <link rel="stylesheet" href="dashboardstyle.css"> --> 
    <!-- ADDED BY COMMUNITY --> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body> 
    <div class="sidebar"> 
        <div class="logo-content"> 
            <div class="logo"> 
                <i class="fa-solid fa-film"></i> 
                <div class="logo-name">Sinema</div> 
            </div> 
            <i class='bx bx-menu' id="btn"></i> 
        </div> 
        <ul class="nav-list"> 
            <li> 
                <i class='bx bx-search'></i> 
                <input type="text" placeholder="Arama yap.."> 
            </li> 
            <li> 
                <a href="index.html"> 
                    <i class='bx bxs-grid'></i> 
                    <span class="links_name">Anasayfa</span> 
                </a> 
            </li> 
            <li> 
                <a href="İzleyici.html"> 
                    <i class="fa-regular fa-user"></i> 
                    <span class="links_name">İzleyici</span> 
                </a> 
            </li> 
            <li> 
                <a href="analiz.html"> 
                    <i class='bx bxs-bar-chart-alt-2'></i> 
                    <span class="links_name">Analiz</span> 
                </a> 
            </li> 
            <li> 
                <a href="filmler.html"> 
                    <i class='bx bxs-film'></i> 
                    <span class="links_name">Filmler</span> 
                </a> 
            </li> 
            <li> 
                <a href="bilet.html"> 
                    <i class="fa-solid fa-ticket"></i> 
                    <span class="links_name">Bilet</span> 
                </a> 
            </li> 
            <li> 
                <a href="salon.html"> 
                    <i class='bx bx-chair'></i> 
                    <span class="links_name">Salon</span> 
                </a> 
            </li> 
        </ul> 
        <div class="profile-content"> 
            <div class="profile"> 
                <div class="profile-details"> 
                    <img src="images/proflile.jpg" alt=""> 
                    <div class="name-job"> 
                        <div class="name">Aykuthan Kırcalı</div> 
                        <div class="job">Personel şefi</div> 
                    </div> 
                </div> 
                <i class='bx bx-log-in' id="log-out"></i> 
            </div> 
        </div> 
    </div> 
    <div class="home-content"> 
        <div class="text">Sinema Salonu | Personel</div> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

修复方案 #

偏移根源是原CSS存在语法错误，且Bootstrap全局样式（如ul默认内边距、样式优先级）覆盖了自定义侧边栏规则，按以下步骤修复：

1. 修正CSS语法错误：删除原CSS中body: body、sidebar: .sidebar这类无效的前缀声明，这些会导致样式失效。
2. 强制固定侧边栏位置：给.sidebar添加!important提升优先级，确保它固定在左侧，不受Bootstrap样式影响。
3. 重置Bootstrap对列表的默认样式：Bootstrap会给ul添加padding-left: 1rem，导致侧边栏列表内缩，需手动重置。

修改后的核心CSS代码 #

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif;}
body { position: relative; min-height: 100vh; width: 100%; overflow: hidden;}
/* 强制固定左侧，提升优先级 */
.sidebar { 
    position: fixed; 
    top: 0; 
    left: 0!important; 
    margin-left: 0!important;
    height: 100%; 
    width: 240px; 
    background: #11101d; 
    padding: 6px 14px; 
    transition: all 0.5s ease;
    z-index: 9999; /* 避免被Bootstrap组件遮挡 */
}
.sidebar .active { width: 240px;}
.sidebar ul li { position: relative; height: 50px; width: 100%; margin: 0 5px; list-style: none; line-height: 50px;}
/* 重置Bootstrap对ul的默认内边距 */
.sidebar .nav-list {
    padding-left: 0;
}
.sidebar ul li input { position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-radius: 12px; outline: none; border: none; background: #1d1b31; padding-left: 50px; font-size: 18px; color: #fff;}
.sidebar ul li .bx-search { position: absolute; z-index: 99; color: #fff; font-size: 22px;}
.sidebar ul li a { color: #fff; display: flex; align-items: center; text-decoration: none; transition: all 0.4s ease; border-radius: 12px;}
.sidebar ul li a:hover { color: #11101d; background: #fff;}
.sidebar ul li i { height: 50px; min-width: 50px; border-radius: 12px; line-height: 50px; text-align: center;}

额外说明 #

• 原CSS中的.sidebar .active规则默认宽度与基础样式一致，可根据侧边栏折叠逻辑自行调整。
• 若仍有偏移，检查是否存在Bootstrap的container等组件挤压布局，确保侧边栏z-index足够高。

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