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

像这样：

当我使窗口更窄时，导航丸开始折叠（这很好），但布局不舒服。当我把窗口变小时，这就是它们的样子：

我希望他们能够很好地排列在中心的行中。像这样（photoshopped）：

我正在使用Jade作为我的HTML，所以我可以从服务器上的数组动态获取标签，所以对于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;
}

小提琴：https://jsfiddle.net/bnn9f3a3/

Answer 2

如果你想保持弹性风格..

（请参阅下面的小提示以获得更易读的评论说明）

＆＃13;

.tagnav {
    display: flex;
 }
 
 .ptag {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
 }
 
  li {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
   margin: 5px;
   padding: 5px 10px;
   text-align: center;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 18px;
   color: white;
   background-color: black;
   border-radius: 15px;
   cursor: pointer;
 }
 
.ptag.nav-pills > li.inactive {
  color: #909090;
}

＆＃13;

<div class="container">
  <br>
  <div class="row">
    <div class="tagnav col-xs-12">
      <ul class="ptag nav nav-pills">
        <li class="active">tech</li>
        <li class="active">art</li>
        <li class="active">electronics</li>
        <li class="active">dsp</li>
        <li class="active">c++</li>
        <li class="active">openframeworks</li>
        <li class="active">processing</li>
        <li class="active">graphics</li>
        <li class="active">java</li>
        <li class="active">unity3d</li>
        <li class="active">c#</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

<强>拨弄

基于您的html结构

https://jsfiddle.net/Hastig/x3mu0k1d/

原创，为他人

https://jsfiddle.net/Hastig/h8w58rzd/

Bootstrap .nav-pills折叠对齐

2 个答案: