使用Bootstrap 4 Alpha在小設備上製作可滾動的居中導航6

Question

我有標準的Bootstrap導航欄，並帶有class="justify-content-center"。我希望這個導航欄一旦元素沒有足夠的空間就可以滾動。我的問題是，我只能向右滾動，而不能向左滾動。我一直在使用的以下代碼位於https://jsfiddle.net/rwx0xLm8/。

Answer 1

檢查它的隊友。

<div class="container-fluid" style="width:100%"> 

     <div class="row justify-content-center"> 

     <ul class="nav"> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 1</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 2</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 3</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 4</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 5</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 6</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 7</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 8</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 9</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 10</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 11</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 12</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">Tab 13</a></li> 
     </ul>  
    </div> 
</div> 


.nav { 

    overflow:auto; 
    text 
} 
.nav .nav-item a {white-space: nowrap;}