javascript - Bootstrap .nav-pills 折叠对齐

Question

我使用 nav-pills 作为标记系统的切换开关集合。它是一个包含列表元素的无序列表。使用 Jade 和 NodeJS 可以像这样设置列表项:

.row
  .tagnav.col-xs-12
     ul.ptag.nav.nav-pills
        each tc in tagColours
           li(onClick="selectTag('"+tc.tag+"', '"+tc.colour+"')").active #{tc.tag}

该行与屏幕中心对齐:

.tagnav {
   display: flex;
   justify-content: center;
   flex-direction: row;
}

像这样:

当我使窗口更窄时，导航丸开始折叠(这很好)，但布局并不令人愉快。这是当我缩小窗口时它们的样子:

我希望它们能够很好地排列在居中的行中。像这样(经过照片处理):

我在 HTML 中使用 Jade，这样我就可以从服务器上的数组动态获取标签，因此对于 jsfiddle，我只是静态地放入标签。他们的行为似乎是一样的。 JSFiddle

谢谢。

Answer 1

添加这个可以让它变得更好:

.ptag.nav-pills > li.active {
  color: white;
  background-color: black;
  border-radius: 15px;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.nav-pills>li {
  display: inline-block;
}
.nav-pills {
  text-align: center;
}

fiddle :https://jsfiddle.net/bnn9f3a3/