Justify Nav-pills con Bootstrap v4

Question

Voglio giustificare la mia barra di navigazione attraverso la larghezza del div. Il problema è che io uso Bootstrap v4 e la classe di giustificazione di nav non è ancora disponibile.

Ecco il codice:

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

Non voglio usare le percentuali in CSS per fare questo; Voglio qualcosa che sia reattivo.

Answer 1

davvero il nav-justify class manca. È possibile aggiungere voi stessi sulla base del codice di TB3 per ora: il codice

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; 
} 

codice CSS compilato:

.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> 

grandi schermi

piccolo schermo

UPDATE: Come di BS4 alfa 6, il nav-justified è tornato, insieme a una nuova classe nav-fillhttp://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Answer 2

avevano altrove la documentazione di Boostrap v.4alpha, on this page, ma ora è rotta.

C'è il corrispondente ticket for this e c'è già stato creato pull request for v4-dev branch.

di inviare il codice intero frammento di qui, non ha senso, così the changes you may see here, e per rattoppare stessi file 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

Come di Bootstrap alfa 6, nav-justified è tornato, e non v'è un nuovo nav-fill classe.

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

Hai solo bisogno di aggiungere la classe al vostro nav ..

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

Bootstrap 4 Justified Nav