在ng-repeat中自适应bootstrap nav（ul）-width自动到容器宽度

Question

对于我的网页，我使用的是Bootstrap和Angular。

在我的一个页面中，我在ng-repeat元素中有一个bootsrap-nav（ul）。 带有对象的数组包括姓名和人物年份。

<ul class="nav nav-pills" ng-controller="PersonsCtrl">
    <li role="presentation" class="active" ng-repeat="person in persons" style="margin-bottom: 5px">
        <a><b>{{person.year}} | </b>{{person.name}}</a> 
    </li>
</ul>

循环结果：

所以在我的图片中，红线显示了我的容器宽度的结束。 目前，导航符合他们的内容。

但是我的目标是在最后一个导航到红线的所有行中添加自由空间，划分为行中的其他导航，因此不会出现这样的情况。自由空间了。

是否有可能得到这个。

感谢您的帮助！

Answer 1

我使用了css的flexbox属性并想出了这个，我希望这可以帮助你或让你对事情有所了解，这里有fiddle说同样的事情

HTML：

<ul class="navbar">
  <li class="navs"></li>
  <li class="navs"></li>
  <li class="navs"></li>
  <li class="navs"></li>
  <li class="navs"></li>
   <li class="navs"></li>
  <li class="navs"></li>
  <li class="navs"></li>
   <li class="navs"></li>
  <li class="navs"></li>
  <li class="navs"></li>
</ul>

CSS

.navbar{
  display:flex;
  flex-wrap:wrap;
}
.navs{
  flex-grow:1;
  width:100px;
  height:30px;
  border:solid 1px red;
  list-style-type:none;
}