Bootstrap tab justified - Има ли начин да са с еднаква широчина?

[Torbalan Trolski]

<ul id="xxx" class="nav nav-tabs nav-justified" role="tablist">
    <li class="active">
        <a href="#yyy" role="tab" data-toggle="tab">1234567890</a>
    </li>
    <li>
        <a href="#zzz" role="tab" data-toggle="tab">12345</a>
    </li>
</ul>

Има ли някакъв интелигентен начин табовете да станат с еднаква широчина?

Принципно постигах желания ефект с

float: left; 
display: block;

и ръчно слагане на width. Но продължавам да се чудя няма ли интелигентен начин да се направи the bootstrap way.

 

[stuklen]

От: Bootstrap tab justified - Има ли начин да са с еднаква широчина?

Те по принцип са си с еднаква, зависи в какъв контейнер са сложени.
Пробвай ги на първо ниво в един див:

<div class = "container"> </div>

 

[Torbalan Trolski]

От: Bootstrap tab justified - Има ли начин да са с еднаква широчина?

Те по принцип са си с еднаква, зависи в какъв контейнер са сложени.
Пробвай ги на първо ниво в един див:

А бе май не са. Прави ги според дължината на текста.
http://getbootstrap.com/components/#nav-justified

 

[Sky]

От: От: Bootstrap tab justified - Има ли начин да са с еднаква широчина?

А бе май не са. Прави ги според дължината на текста.
http://getbootstrap.com/components/#nav-justified

Според броя им дължина в проценти?

 

[Torbalan Trolski]

От: Bootstrap tab justified - Има ли начин да са с еднаква широчина?

Според броя им дължина в проценти?

Не четеш брато

Принципно постигах желания ефект ...
с ръчно слагане на width. Но продължавам да се чудя няма ли интелигентен начин да се направи the bootstrap way.

и като гледам май няма

.nav-justified {
  width: 100%;

  > li {
    float: none;
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }
}

by design си е така

 

[klk]

От: Bootstrap tab justified - Има ли начин да са с еднаква широчина?

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Страница 1</a></li>
<li><a href="#">Страница 1</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Страница 1 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Страница 31</a></li>
<li><a href="#">Страница 32</a></li>
<li><a href="#">Страница 33</a></li>
<li class="divider"></li>
<li><a href="#">Страница 34</a></li>
</ul>
</li>
</ul>

 

[Torbalan Trolski]

От: Bootstrap tab justified - Има ли начин да са с еднаква широчина?

Докарах го с чист css. Ето и кода, ако на някой му потрябва.

.nav-tabs.nav-justified {    
    @media (min-width: @screen-sm-min) {
        display: table;
        table-layout: fixed;
        width: 100%;
        
        > li {
            display: table-cell;
            width: 100%;
        }        
      }
}