侧滚动移动标签

Question

我正在尝试在引导程序站点中创建一个下拉菜单,其中包含选项卡.图标比菜单的宽度更远,我希望移动用户能够侧面滚动它.

这是一个链接.

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>

我尝试过使用猫头鹰旋转木马,但我似乎无法选择一些我不想做的项目.

有没有人有任何想法？

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

*这会添加滚动条和滚动功能(我们删除设置的宽度,因此它可以使用任意数量的元素,负边距用于删除内联块元素创建的空白区域和白色空间:nowrap实际上使它在一个可扩展的线上:)

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

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

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