如何查看Bootstrap对元素的应用样式或禁用指定元素的Bootstrap样式？

嘿，我完全懂你这种头疼的情况——Bootstrap确实能省不少事，但有时候它的全局样式会偷偷“篡改”我们自定义的元素，尤其是footer、logo这种我们常做个性化设计的部分。下面给你两种清晰的解决思路，先定位问题根源，再针对性解决：

其实浏览器自带的开发者工具就能帮你揪出所有Bootstrap施加的样式，步骤超简单：

• 打开开发者工具：按F12快捷键，或者右键点击异常的footer/logo，选择「检查」选项。
• 定位目标元素：在「元素(Elements)」面板里选中你的footer或logo标签，右侧的「样式(Styles)」面板会列出所有作用在这个元素上的CSS规则。
• 识别Bootstrap规则：你会看到规则旁边标注了来源文件，比如bootstrap.min.css，这些就是Bootstrap给元素加的样式。你可以逐个取消规则前的勾选，看看取消哪个规则后元素恢复正常，这样就能精准找到冲突点了。
• 辅助工具：「计算样式(Computed)」面板能展示元素最终生效的所有样式，对比引入Bootstrap前后的差异，也能帮你快速锁定异常样式。

既然网站其他部分还要用Bootstrap，我们就只针对出问题的footer和logo做处理，有几种方法可选：

方法1：一键重置样式，再重新自定义 #

如果不想逐个排查冲突，直接把元素的所有样式重置回浏览器默认状态，再重新写自己的样式：

/* 给你的footer和logo分别加自定义类，比如custom-footer、custom-logo */
.custom-footer, .custom-logo {
  /* all: revert 会让样式回到浏览器默认状态；all: unset 会回到初始值或继承值，按需选择 */
  all: revert;
  /* 接下来写你自己的样式即可 */
  padding: 20px;
  background-color: #222;
  color: #fff;
}

注：all属性兼容性很好，现代浏览器都支持，不用太担心兼容问题。

方法2：精准覆写冲突样式 #

如果你已经通过开发者工具找到了具体的冲突样式，就针对性覆写，这种方式更灵活：
比如你发现Bootstrap给footer加了margin-top: 2rem和padding: 1rem，就写：

/* 用比Bootstrap选择器更具体的规则，比如加上父元素或元素id，提高优先级 */
body .custom-footer {
  margin-top: 0;
  padding: 15px 0;
  /* 其他自定义样式 */
}

如果Bootstrap的选择器优先级实在太高，临时用!important也能解决（尽量少用，避免后续样式维护麻烦）：

.custom-footer {
  margin-top: 0 !important;
}

方法3：隔离元素内部样式（进阶技巧） #

如果你的footer内部还有a、p等标签，担心Bootstrap的全局样式影响它们，可以给内部所有元素也重置样式：

.custom-footer * {
  all: revert;
}

这样footer内部的所有元素都会摆脱Bootstrap的样式控制，你再重新给内部元素写样式就行。

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