较小设备上的水平导航栏滚动答案

【问题标题】：Horizontal navbar scroll on smaller devices较小设备上的水平导航栏滚动
【发布时间】：2018-04-08 16:22:21
【问题描述】：

我正在使用 bootstrap 4。我使用

创建了第二个导航栏

<div class="nav-active-border b-danger bottom">
    <ul class="nav nav-active-border b-warning flex-row">
       <li class="nav-item">Link 1</li>
       <li class="nav-item">Link 2</li>
       <li class="nav-item">Link 3</li>
       <li class="nav-item">Link 4</li>
       <li class="nav-item">Link 5</li>
       <li class="nav-item">Link 6</li>
       <li class="nav-item">Link 7</li>
       <li class="nav-item">Link 8</li>
       <li class="nav-item">Link 9</li>
    </ul>
</div>

然而，这在手机上显示的两行中有多个项目。如何在移动设备上为这些导航项目创建水平滚动，并带有仅用于移动布局的指示器。它在台式机和笔记本电脑上显示完美

我正在尝试在谷歌上实现同样的目标 https://www.google.co.in/intl/en/about/products/

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 navbar nav horizontal-scrolling

【解决方案1】：

我使用 flexbox 实用程序类在 Bootstrap 4 中创建了类似的东西。

一个小的 jQuery 用于切换justify-content-end 类，它将导航项对齐到右侧，而不是左侧。您可以切换以向任一方向滑动导航。 CSS过渡用于滑动动画。

演示：https://www.codeply.com/go/IHwAx16j14

<div class="container">
    <div class="d-flex align-items-center">
        <div class="flex-shrink-0">
            <a href="#" class="btn-left btn-link toggle p-2"><i class="ion-chevron-left"></i></a>
        </div>
        <div class="flex-grow-1 w-100 o-hidden">
            <ul class="nav nav-fill text-uppercase position-relative flex-nowrap">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Self</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">World</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Lifestyle</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Bio</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Politics</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Local</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Science</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Tech</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Health</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Food</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Design</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Culture</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Travel</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">More</a>
                </li>
            </ul>
        </div>
        <div class="flex-shrink-0">
            <a href="#" class="btn-right btn-link toggle p-2"><i class="ion-chevron-right"></i></a>
        </div>
    </div>
</div>

jQuery

$('.toggle').click(function(){
    $('.nav').toggleClass("justify-content-end");
});

CSS

.o-hidden {
    overflow:hidden;
}

.nav {
    transition: transform 0.4s;
    transform: translateX(50%);
    left: -50%;
}

.nav.justify-content-end {
    transform: translateX(0);
    left: 0;
}

【讨论】：