Uzasadnij Nav-pigułki z Bootstrap v4

Question

Chcę usprawiedliwić mój pasek nawigacji na całej szerokości div. Problem polega na tym, że używam Bootstrap v4, a klasa nav-justify nie jest jeszcze dostępna.

Oto kod:

<ul class="nav nav-pills"> 
    <li class="nav-item"> 
     <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a> 
    </li> 
</ul> 

Nie chcę używać procentowe w CSS to zrobić; Chcę czegoś, co jest responsywne.

Answer 1

Rzeczywiście brakuje nav-justify class. Można go dodać siebie na podstawie kodu TB3 jest teraz: kod

SCSS:

// Justified nav links 
// ------------------------- 

@mixin nav-justified { 
    width: 100%; 

    .nav-item { 
    float: none; 
    } 

    .nav-link { 
    text-align: center; 
    margin-bottom: 5px; 
    } 

    > .dropdown .dropdown-menu { //todo: remove child selector 
    top: auto; 
    left: auto; 
    } 

    @include media-breakpoint-up(sm) { 
    .nav-item { 
     display: table-cell; 
     width: 1%; 
    } 
    .nav-link { 
     margin-bottom: 0; 
    } 
    } 
} 

// Move borders to anchors instead of bottom of list 
// 
// Mixin for adding on top the shared `.nav-justified` styles for our tabs 
@mixin nav-tabs-justified { 
    border-bottom: 0; 

    .nav-link { 
    // Override margin from .nav-tabs 
    margin-right: 0; 
    border-radius: $border-radius; 
    } 

    .nav-link.active, 
    .nav-link.active:hover, 
    .nav-link.active:focus { 
    border: 1px solid $nav-tabs-justified-link-border-color; 
    } 

    @include media-breakpoint-up(sm) { 
    .nav-link { 
     border-bottom: 1px solid $nav-tabs-justified-link-border-color; 
     border-radius: $border-radius $border-radius 0 0; 
    } 
    .nav-link.active, 
    .nav-link.active:hover, 
    .nav-link.active:focus { 
     border-bottom-color: $nav-tabs-justified-active-link-border-color; 
    } 
    } 
} 

.nav-justified { 
    @include nav-justified; 
    @include nav-tabs-justified; 
} 

skompilowany kod CSS:

.nav-justified { 
    width: 100%; 
    border-bottom: 0; } 
    .nav-justified .nav-item { 
    float: none; } 
    .nav-justified .nav-link { 
    text-align: center; 
    margin-bottom: 5px; } 
    .nav-justified > .dropdown .dropdown-menu { 
    top: auto; 
    left: auto; } 
    @media (min-width: 544px) { 
    .nav-justified .nav-item { 
     display: table-cell; 
     width: 1%; } 
    .nav-justified .nav-link { 
     margin-bottom: 0; } } 
    .nav-justified .nav-link { 
    margin-right: 0; 
    border-radius: 0.25rem; } 
    .nav-justified .nav-link.active, 
    .nav-justified .nav-link.active:hover, 
    .nav-justified .nav-link.active:focus { 
    border: 1px solid #ddd; } 
    @media (min-width: 544px) { 
    .nav-justified .nav-link { 
     border-bottom: 1px solid #ddd; 
     border-radius: 0.25rem 0.25rem 0 0; } 
    .nav-justified .nav-link.active, 
    .nav-justified .nav-link.active:hover, 
    .nav-justified .nav-link.active:focus { 
     border-bottom-color: #fff; } } 

HTML

<div class="container"> 
<ul class="nav nav-pills nav-justified"> 
    <li class="nav-item"> 
    <a class="nav-link active" href="#">Active</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Link</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Another link</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link disabled" href="#">Disabled</a> 
    </li> 
</ul> 
</div> 

duże ekrany

małym ekranie

UPDATE: Od BS4 alfa 6, nav-justified powraca, wraz z nową klasą nav-fillhttp://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Answer 2

Mieli się w dokumentacja Boostrap v.4alpha, on this page, ale teraz jest uszkodzona.

Istnieje odpowiednia ticket for this, a tam już utworzono pull request for v4-dev branch.

Aby dodawać cały fragment kodu tutaj, nie ma sensu, więc the changes you may see here i załatać sobie plik Sass:

// Justified nav links 
// ------------------------- 

@mixin nav-justified { 
    width: 100%; 

    .nav-item { 
    float: none; 
    } 

    .nav-link { 
    margin-bottom: $nav-tabs-justified-link-margin-bottom; 
    text-align: center; 
    } 

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

    @include media-breakpoint-up(md) { 
    .nav-item { 
     display: table-cell; 
     width: 1%; 
    } 
    .nav-link { 
     margin-bottom: 0; 
    } 
    } 
} 

// Move borders to anchors instead of bottom of list 
// 
// Mixin for adding on top the shared `.nav-justified` styles for our tabs 
@mixin nav-tabs-justified { 
    border-bottom: 0; 

    .nav-link { // Override margin from .nav-tabs 
    margin-right: 0; 
    @include border-radius($nav-tabs-justified-link-border-radius); 
    } 

    .nav-link.active { 
    @include plain-hover-focus { 
     border: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color; 
    } 
    } 

    @include media-breakpoint-up(md) { 
    .nav-link, 
    .nav-link.disabled, 
    .nav-link.disabled:hover { 
     border-bottom: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color; 
     @include border-top-radius($nav-tabs-justified-link-border-radius); 
    } 
    .nav-link.active { 
     @include plain-hover-focus { 
     border-bottom-color: $nav-tabs-justified-active-link-border-color; 
     } 
    } 
    } 
} 

Answer 3

As z Bootstrap alfa 6, nav-justified jest z powrotem, a tam jest nowy nav-fill klasa.

http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Wystarczy dodać klasę do swojego nav ..

<ul class="nav nav-pills nav-justified"> 
     .. 
</ul> 

Bootstrap 4 Justified Nav