为什么Bootstrap的文本颜色类text-white使用后不生效？

可能的问题原因 #

• 你使用的是Bootstrap 5及以上版本：Bootstrap 5正式移除了jumbotron组件，如果你引入的是v5+版本的Bootstrap，原jumbotron的默认背景样式已经不存在，如果你没有手动给外层#one设置深色背景，或者你自己给#one设置的文本颜色优先级高于text-white类，就会出现样式失效的情况。
• 样式优先级冲突：id选择器的优先级远高于类选择器，如果你在自定义CSS中给#one或者#one h1、#one p设置了文本颜色，会直接覆盖text-white的样式。你可以打开浏览器开发者工具，选中对应的文本元素，查看样式面板中text-white的color属性是否被划掉，即可确认是否被其他样式覆盖。
• Bootstrap资源引入异常：如果Bootstrap CSS文件引入路径错误、网络加载失败，或者你把自定义CSS放在了Bootstrap CSS之前引入，都可能导致text-white样式不生效。

解决建议 #

• 如果你用的是Bootstrap 5，可以手动模拟jumbotron效果，给外层div添加背景和内边距类即可，示例代码：

<div class="bg-dark p-5 rounded" id="one">
  <div class="container">
    <h1 class="text-white">Example</h1>
    <p class="text-white">Second Example</p>
  </div>
</div>

• 如果是优先级冲突问题，优先调整自定义样式的选择器，避免用id选择器设置全局文本样式，确保障碍text-white生效的自定义样式优先级低于Bootstrap自带类。
• 检查Bootstrap CSS的引入路径和顺序，先引入Bootstrap官方CSS，再引入自己编写的自定义CSS。

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