为什么引入Bootstrap后自定义CSS侧边栏菜单会发生变形？

冲突原因 #

• 样式引入顺序错误：你当前将Bootstrap CSS的引入位置放在了自定义侧边栏样式之后，Bootstrap的默认规则优先级更高，覆盖了你写的*通用选择器里的边距重置规则
• Bootstrap 5 对<ul>元素默认设置了padding-left: 2rem的左内边距和margin-bottom: 1rem的下外边距，规则未被覆盖时就会导致导航列表整体偏移、样式变形

解决方法 #

1. 调整CSS引入顺序，把自定义侧边栏样式（无论是外部CSS文件还是<style>标签内的样式）放在Bootstrap CSS的引入之后，确保自定义样式优先级高于Bootstrap默认样式，调整后的头部引入示例：

<head>
  <title>HTML CSS JS</title>
  <!-- 先引入第三方CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet" />
  <!-- 最后引入/编写自定义样式 -->
  <style>
    /* 这里放你写的侧边栏CSS代码 */
  </style>
</head>

2. 可以在你的自定义CSS中添加专属规则，主动覆盖Bootstrap的默认ul样式，双重保险避免样式冲突：

.sidebar .nav-links {
  padding-left: 0;
  margin-bottom: 0;
}

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