Justify Nav-Pillen mit Bootstrap v4

Question

Ich möchte meine Navigationsleiste über die Breite des div zu rechtfertigen. Das Problem ist, dass ich Bootstrap v4 benutze und die nav-justify Klasse ist noch nicht verfügbar. Hier

ist der Code:

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

Ich will nicht Prozentsatz in CSS verwenden, um dies zu tun; Ich will etwas, das reagiert.

Answer 1

tatsächlich fehlt die nav-justify class. Sie können es selbst jetzt basierend auf TB3 Code hinzufügen:

SCSS Code:

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

zusammengestellt CSS-Code:

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

große Bildschirme

kleinen Bildschirm

UPDATE: Ab BS4 Alpha 6 ist die nav-justified zurück, zusammen mit einer neuen Klasse nav-fillhttp://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Answer 2

Sie hatten es in die Dokumentation von Boostrap v.4alpha, on this page, aber jetzt ist es kaputt.

Es gibt entsprechende ticket for this, und es ist bereits pull request for v4-dev branch erstellt.

Um den gesamten Code-Schnipsel hier posten, macht keinen Sinn, so the changes you may see here, und selbst Ihre SASS-Datei patchen:

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

Ab Bootstrap alpha 6, nav-justified ist wieder da, und es gibt eine neue nav-fill Klasse.

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

Sie müssen nur die Klasse zu Ihrem nav hinzuzufügen ..

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

Bootstrap 4 Justified Nav