AngularJS路由场景下Bootstrap样式不生效问题咨询

这种Bootstrap样式在JSP页面不生效的问题我碰到过好多次，大概率是这几个地方出了问题，一个个排查就行：

• 检查Bootstrap资源的引入路径是否正确
  JSP是在服务器端渲染的，相对路径很容易因为页面嵌套或者路由的问题出错。如果是本地存放的Bootstrap文件，建议用JSP的内置对象来生成绝对路径，避免路径偏差：

  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  

  这里${pageContext.request.contextPath}会自动获取你的项目根路径。如果是用CDN引入，要确认CDN链接没有拼写错误，且当前网络能正常访问这些资源。

• 确认资源引入顺序是否正确
  Bootstrap（尤其是3.x版本）依赖jQuery，必须先引入jQuery，再引入Bootstrap的JS文件，否则不仅交互组件会失效，样式渲染也可能受影响。正确的引入顺序参考：

  <head>
    <!-- 先引入Bootstrap CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
  </head>
  <body>
    <!-- 页面内容 -->
    
    <!-- 先引入jQuery，再引入Bootstrap JS -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  </body>
  

• 排查样式冲突问题
  有时候你自定义的CSS会覆盖Bootstrap的样式。可以打开浏览器开发者工具（按F12），选中有问题的元素，查看右侧Styles面板，看看Bootstrap的样式是不是被划掉了。如果是，要么调整自定义样式的选择器优先级，要么在必要时用!important（尽量少用，避免后续维护麻烦）。

• 确认页面基础结构是否符合要求
  Bootstrap需要标准的HTML5文档结构，开头必须有<!DOCTYPE html>声明，且<html>标签要带上正确的语言属性，否则浏览器会进入怪异模式，Bootstrap布局会完全失效：

  <!DOCTYPE html>
  <html lang="zh-CN">
  

• 检查服务器是否正确加载资源
  打开浏览器开发者工具的Network标签，刷新页面，查看Bootstrap相关文件的请求状态。如果状态码是404，说明资源路径肯定错了；如果是其他错误码，再排查服务器配置或者资源文件是否损坏。

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