如何将加载器居中对齐到Bootstrap3+AngularJS导航栏无序列表元素

我帮你把这段导航栏代码用规范的Markdown格式整理好了，方便你后续调试或分享：

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span> <!-- 补充你未写完的代码部分即可 -->
  </button>
  <!-- 推荐添加品牌标识，符合Bootstrap导航栏的标准结构 -->
  <a class="navbar-brand" href="#">你的站点名称</a>
</div>

<!-- 对应按钮折叠的导航菜单容器 -->
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <!-- 这里是你提到的带li元素的无序列表，结合AngularJS可以动态生成 -->
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#about">关于</a></li>
    <!-- 用AngularJS动态生成示例 -->
    <li ng-repeat="menu in navMenus" ng-class="{active: menu.active}">
      <a ng-href="{{menu.url}}">{{menu.title}}</a>
    </li>
  </ul>
</div>

几个实用的小建议 #

• 因为Bootstrap 3依赖jQuery，一定要确保jQuery在Bootstrap JS之前引入，之后再引入AngularJS，避免出现组件失效的问题
• 用AngularJS的ng-repeat生成导航项时，记得给每个<li>加上track by $index或者唯一标识，避免重复渲染的警告
• 激活状态可以用ng-class绑定控制器里的变量，实现路由切换时自动高亮当前菜单项

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