在引導程序中居中導航條鏈接

Question

我想將我的鏈接置於導航欄的移動視圖（md和向下視圖）上，但似乎無法找到解決方案。 我使用的引導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

可以使用Flexbox的實現它。

這裏的工作我的筆創造：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>