Tabs full width if more then one line with css

Question

I have a few tabs with standard bootstrap 3.0 (nav-tabs) like this

| XXXXX | YYYYY | ZZZZZZ |_________________

and if I narrow the screen twice, for example, I get this

| XXXXX | YYYYY |
| ZZZZZ |________

but I want when the tab moves down to the second line, it has to be 100% width like this

| XXXXX | YYYYY |
|     ZZZZZ     |

always with full width if tabs don't fit in one line

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

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

Is this possible only with css?

UPDATE

if the tabs fit in one line (without last, for example), they do not want to move

| XXXXX | YYYYY | ZZZZZ |
|         AAAAA         |

but perfectly if they are always moved evenly like this

|     XXXXX     |   YYYYYY   |
|     ZZZZZ     |   AAAAAA   |

|    XXXXX    |    YYYYYY    |
|           ZZZZZ            |

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

Answer 1

Remove floating behavior:

You need to update your list items to remove the floating behavior and add text-center for the parent element.

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>

Flexible box method:

Modern browser method to make the items more flexible and the items occupy 50% of the parent container. This is a template, you can make use of different media queries and flex-basis values to achieve what you need.

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>