旧Google Charts API模板中justified-nav.css报404，求替代方案

嘿，这个坑我之前帮人踩过好多次——justified-nav.css根本不是Bootstrap核心框架的一部分，它只是早期Bootstrap版本（比如v3）里的官方示例配套样式，后来Google托管的这个文件被移除或路径变更，就导致了404报错。下面给你几个靠谱的替代方案，按推荐程度排序：

方案1：用Bootstrap原生类实现相同效果（首推） #

如果你的项目已经在用Bootstrap 4或更高版本，完全不需要额外的CSS文件，直接用框架自带的Flex布局类就能实现导航栏两端/均匀对齐的效果：

假设你原来的导航结构是这样的：

<nav class="navbar navbar-default">
  <div class="container">
    <ul class="nav nav-justified">
      <li><a href="#">首页</a></li>
      <li><a href="#">图表</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </div>
</nav>

换成Bootstrap 4+的写法，只需要修改类名：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <ul class="navbar-nav w-100 justify-content-between">
      <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="#">图表</a></li>
      <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
    </ul>
  </div>
</nav>

• w-100让导航栏占满容器宽度
• justify-content-between实现导航项两端对齐，想要均匀分布就换成justify-content-around

如果还在用Bootstrap 3，直接用框架核心自带的.nav-justified类就行，删掉原来的外部CSS引用即可，这个类是Bootstrap 3原生支持的。

方案2：复刻原justified-nav.css的核心样式 #

如果你想完全还原原来的视觉效果，又不想升级Bootstrap，可以把原文件的核心代码抽出来，存成本地CSS文件使用：

/* 复刻justified-nav.css的核心视觉效果 */
.nav-justified {
  background-color: #eee;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5;
  background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #ddd;
  background-image: none;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

/* 响应式适配 */
@media (min-width: 768px) {
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
    border-radius: 0 5px 5px 0;
  }
}

把这段代码存成custom-nav.css放在项目本地，然后替换原来的外部引用即可，彻底摆脱对失效资源的依赖。

方案3：引用旧版本Bootstrap示例里的原文件（不推荐） #

如果你非要用原版justified-nav.css，可以从Bootstrap 3的官方示例仓库里找到这个文件，下载到本地引用。但非常不推荐这个方案——旧版本Bootstrap存在安全漏洞，且维护性极差，远不如前面两个方案稳妥。

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