ブートストラップ内のナビバーリンクのセンタリング

Question

私のリンクを私のnavbarのモバイルビュー（mdとdownビュー）にセンタリングしたいのですが、解決策が見つからないようです。 私は、ブートストラップV4-α

<div class="container-fluid p-b-3"> 

    <nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded"> 


     <ul class="nav navbar-nav"> 

      <li> 
       <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a> 
      </li> 
      <li> 
       <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a> 
      </li> 
      <li> 
       <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a> 
      </li> 
     </ul> 

    </nav> 


</div> 

Here's the codepen link

Answer 1

あなたはフレキシボックスを使用してそれを達成することができます。 http://codepen.io/anon/pen/bwbpNx

CSS私は、これはそれを行うための適切な方法の一つだと思い

.navbar-nav { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

：

は、ここで私が作成した作業ペンです。そう、あなたが別のリンクを追加した場合。それは中心にとどまるでしょう。それが役に立てば幸い。乾杯！

Answer 2

使用メディアクエリとあなたのリンクセンターが整列するためにスタイルを上書きを使用しています。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css'); 
 

 
@media (max-width: 767px) { 
 
    .navbar ul { 
 
    text-align: center; 
 
    } 
 
    .navbar ul li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 0 10px; 
 
    } 
 
    .navbar ul li a { 
 
    margin-left: 0 !important; 
 
    } 
 
}

<div class="container-fluid p-b-3"> 
 
    <nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded"> 
 
    <ul class="nav navbar-nav"> 
 
     <li> 
 
     <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a> 
 
     </li> 
 
     <li> 
 
     <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a> 
 
     </li> 
 
     <li> 
 
     <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>