Nav-pillsをブートストラップv4でジャスティフィケーションする

Question

divの幅を超えてナビゲーションバーを正当化したい。問題は私がBootstrap v4を使用し、nav-justifyクラスが利用できないということです。ここで

は、コードは次のとおりです。

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

私はこれを行うには、CSSでのパーセンテージを使用したくありません。私は応答性のあるものが欲しい。

Answer 1

確かにnav-justify classがありません。あなたは今のTB3のコードに基づいて、それを自分で追加することができます。

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

コンパイル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> 

をの

大画面

小さな画面

UPDATE：、nav-justified新しいクラスと一緒に、バックあるBS4アルファ6のように彼らはそれを持っていたnav-fillhttp://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify

Answer 2

Boostrap v.4alpha、on this pageのドキュメントが、今は壊れています。

対応するticket for thisがあり、すでにpull request for v4-dev branchが作成されています。 、意味がありません、ここではそうthe changes you may see hereを全体のコードスニペットを投稿すると、あなたのSASSファイルを自分でパッチを適用する

：ブートストラップアルファ6のよう

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

、nav-justifiedが帰ってきた、そして新しいnav-fillがありますクラス。あなたは自分のnavにクラスを追加する必要が

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

..

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

Bootstrap 4 Justified Nav