CODEWITHSUNDEEP
htmltwitter-bootstrapcssnavbar
Luntegg
Luntegg

Reputation: 2556

Tabs full width if more then one line with css

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   |

Upvotes: 5

Views: 1461

Answers (2)

m4n0
m4n0

Reputation: 32275

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>

Upvotes: 2

Alex
Alex

Reputation: 8695

You can use media query and centering the last li within .nav-tabs

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

Or use .col-xs-12 and .text-center in the last li

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

Upvotes: 0

Related Questions