侧滚动移动标签

Question

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

这是一个link。

这是我正在使用的代码。

<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 旋转木马，但如果不选择我不完全想做的项目数量，我似乎无法让它工作。

有没有人有什么想法？

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;
}

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

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

*这会隐藏它（如果你想跳过它）

这是工作中的 JSFiddle https://jsfiddle.net/6yw6rp02/4/ 希望对你有所帮助:)

侧滚动移动标签

Side scroll mobile tabs

javascript

css

jquery

twitter-bootstrap

owl-carousel