Question

我有class="justify-content-center"的标准Bootstrap导航栏。一旦元素没有足够的空间，我希望这个导航栏可以滚动。我的问题是，我只能向右滚动而不向左滚动。我使用的以下代码位于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;}

使用Bootstrap 4 Alpha 6在较小的设备上进行可滚动的中心导航

1 个答案: