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;
}