javascript - 侧滚动移动标签

Question

我正在尝试在其中包含选项卡的 Bootstrap 站点中创建下拉菜单。图标超出了菜单的宽度，我希望移动用户能够横向滚动它。

这是它的链接。

https://jsfiddle.net/6yw6rp02/1/

这是我正在使用的代码。

<div class="top-nav-mobile">
    <div role="tabpanel" class="top-nav-btns">

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-signal"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-times"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bell"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-search"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-money"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bug"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-wheelchair"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-envelope"></i></a></li>
            <li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bug"></i></a></li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="asdf">

            </div>
        </div>

    </div>
</div>

我尝试过使用 Owl Carousel ，但如果不选择一些我不想做的元素，我似乎无法让它工作。

有没有人有什么想法？

Answer 1

如果您只想在移动设备上滚动它，最简单的方法就是添加一个滚动条并将其隐藏，这样您就可以滚动浏览菜单，但不会显示真正的滚动条(或者如果您愿意的话可以由您决定:)

这是我尝试过的->

.top-nav-mobile .top-nav-btns {
    width: 280px;
    overflow: auto;

}
.top-nav-mobile .nav li {
     margin-bottom: 0px;
     display:inline-block;
     float:none;
     margin-right:-4px;
}
.top-nav-mobile .nav-tabs {
    border-bottom: none;
    white-space: nowrap;
}

*这增加了滚动条和滚动功能(我们删除了设置的宽度，所以它可以为你想要的元素工作，负边距用于删除内联 block 元素创建的空白和空白: nowrap 实际上使它位于一条可扩展的线上 :)

.top-nav-mobile .top-nav-btns::-webkit-scrollbar { width: 0 !important; }

*这会隐藏它(如果你想你可以跳过它)

这是工作的 JSFiddle https://jsfiddle.net/6yw6rp02/4/希望我能帮到你 :)