Bootstrap网格对齐异常且自定义style.css样式不生效问题求助

排查解决步骤 #

• 调整CSS引入顺序：必须先加载Bootstrap官方CSS，再引入自定义的style.css。如果顺序颠倒，Bootstrap默认样式会覆盖你的自定义规则，导致颜色、尺寸设置不生效。
• 对齐类绑定位置修正：Bootstrap网格的水平对齐（justify-content-*）、垂直对齐（align-items-*）类需要加在.row元素上，绑定在.col列元素上不会生效。
• 确认CSS文件路径正确：如果index.html与存放style.css的css文件夹不在同一级目录，相对路径css/style.css会失效。可以打开浏览器开发者工具的网络面板，刷新后查看style.css加载状态，状态码为200才是正常加载。
• 检查Bootstrap核心CSS加载状态：如果Bootstrap CSS引入地址错误、加载失败，网格系统完全不会生效，列会默认垂直堆叠。同样可以在网络面板确认Bootstrap CSS的加载状态。
• 确认列类名书写正确：对照你使用的Bootstrap版本的网格规则校验类名，比如Bootstrap 5响应式列格式为col-{断点}-{占比}，占比数值不能超过12，类名拼写错误也会导致布局异常。

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