网页左右留白问题：本地CSS修改.container-fluid padding不生效的求助

嘿，我完全懂你遇到的这个小坑——这本质上是CSS加载顺序与优先级导致的问题！

你看你的HTML代码里，自己的styles.css是在Bootstrap的CSS文件之前引入的：

<link rel="stylesheet" href="styles.css">
<!-- 之后才引入Bootstrap的CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" ...>

因为你写的.container-fluid和Bootstrap自带的.container-fluid选择器优先级完全相同，而CSS的规则是后加载的样式会覆盖先加载的同优先级规则。所以Bootstrap的默认padding设置直接把你写的样式覆盖了，这就是为什么本地CSS不生效，但在开发者工具里加代码能成功——因为开发者工具里的样式是最后应用的，优先级比页面所有样式都高。

不用!important完全没问题，给你两个简单的解决办法：

方法1：调整CSS加载顺序（最推荐） #

把你的styles.css移到Bootstrap CSS的后面引入，这样你的自定义样式就会天然覆盖Bootstrap的默认样式：

<!-- 先引入Bootstrap的CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" ...>
<!-- 再引入自己的样式文件 -->
<link rel="stylesheet" href="styles.css">

调整后，你原来写的.container-fluid { padding: 0; }就能正常生效了。

方法2：提高选择器优先级 #

如果不想调整加载顺序，可以把选择器写得更具体，让它的优先级超过Bootstrap的默认选择器。比如：

section .container-fluid {
  padding: 0;
}

或者：

body .container-fluid {
  padding: 0;
}

更具体的选择器会拥有更高的优先级，这样即使加载顺序在前，也能成功覆盖Bootstrap的样式。

个人更推荐第一种方法，它更符合CSS的加载逻辑，代码也更简洁。

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