使用 Bootstrap 4 Alpha 6 在较小的设备上制作可滚动的居中导航

Question

我有带 class="justify-content-center" 的标准 Bootstrap 导航栏。我希望这个导航栏在元素不足时立即滚动 space。我的问题是，我只能向右滚动而不能向左滚动。我一直在使用的以下代码位于 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 在较小的设备上制作可滚动的居中导航

Making A Scrollable Centered Navigation On Smaller Devices Using Bootstrap 4 Alpha 6

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4