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吗？

更新

如果标签适合一行（例如，没有最后一行），则他们不想移动

| XXXXX | YYYYY | ZZZZZ |
|         AAAAA         |

但如果他们总是像这样均匀地移动

，那就完美了

|     XXXXX     |   YYYYYY   |
|     ZZZZZ     |   AAAAAA   |

|    XXXXX    |    YYYYYY    |
|           ZZZZZ            |

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

Answer 1

删除浮动行为：

您需要更新列表项以删除浮动行为，并为父元素添加text-center。

JSfiddle Demo

body {
  margin: 10px;
}
@media (max-width: 991px) {
  .nav.nav-tabs > li {
    display: inline-block;
    float: none;
    width: 49%;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs text-center">
  <li role="presentation" class="active"><a href="#">XXXXXXXXXXXXXXXXXX</a>
  </li>
  <li role="presentation"><a href="#">YYYYYYYYYYYYYYYYYY</a>
  </li>
  <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>
  </li>
  <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>
  </li>
  <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>
  </li>
</ul>

灵活的方法：

现代浏览器方法，使项目更灵活，项目占据父容器的50％。这是一个模板，您可以使用不同的媒体查询和flex-basis值来实现您的需求。

JSfiddle Demo

body {
  margin: 10px;
}
@media (max-width: 991px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav-tabs > li {
    flex: 1 1 33%;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs text-center">
  <li role="presentation" class="active"><a href="#">XXXXXXXXXXXXXXXXXX</a>
  </li>
  <li role="presentation"><a href="#">YYYYYYYYYYYYYYYYYY</a>
  </li>
  <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>
  </li>
  <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>
  </li>
  <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a>
  </li>
</ul>

Answer 2

您可以使用媒体查询并将li

中的最后.nav-tabs居中

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

或者在最后.col-xs-12

中使用.text-center和li

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

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

2 个答案: