如果使用css超过一行,则选中全宽

Question

我有一些像这样的标准bootstrap 3.0(nav-tabs)选项卡

| XXXXX | YYYYY | ZZZZZZ |_________________

如果我缩小屏幕两次,例如,我得到了这个

| XXXXX | YYYYY |
| ZZZZZ |________

但我希望当标签向下移动到第二行时,它必须是这样的100%宽度

| XXXXX | YYYYY |
|     ZZZZZ     |

如果制表符不适合一行,则始终为全宽

| XXXXX | YYYYY |
| AAAAA | BBBBB |
|     ZZZZZ     |

JSFiddle - https://jsfiddle.net/28rhp52s/

这只能用css吗？

UPDATE

如果标签适合一行(例如,没有最后一行),则他们不想移动

| XXXXX | YYYYY | ZZZZZ |
|         AAAAA         |

但如果它们总是像这样均匀地移动,那就完美了

|     XXXXX     |   YYYYYY   |
|     ZZZZZ     |   AAAAAA   |

|    XXXXX    |    YYYYYY    |
|           ZZZZZ            |

|  XXXXX  |  YYYYY  |  ZZZZZ |
|     AAAAA     |    BBBBB   |

Answer 1

您可以使用媒体查询并将最后一个li居中.nav-tabs

@media screen and (max-width: 320px) {
    .nav-tabs>li:last-child {
        clear: both;
        float: none;
        text-align: center;
    }
}

或者在最后使用.col-xs-12and.text-centerli

<li class="col-xs-12" role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>     </li>