Javascript 侧面滚动移动标签

我试图在一个有标签的引导站点中创建一个下拉菜单。图标超出了菜单的宽度，我希望移动用户能够侧边滚动它

这里有一个链接

这是我正在使用的代码

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

我尝试过使用猫头鹰旋转木马，但如果不选择一些我并不想做的事情，我似乎无法让它工作

---

有人有什么想法吗？

如果你只想在手机中滚动，最简单的方法就是添加一个滚动条并将其隐藏，这样你就可以滚动菜单，但不需要显示真正的滚动条（或者如果你愿意，可以由你决定：）

以下是我尝试过的->

.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实际上使它位于一条可展开的行：）

*这会隐藏它（如果您愿意，可以跳过它）

这是正在工作的JSFIDLE

---

我希望我能帮到你：）

如果你只想在手机上滚动，最简单的方法就是添加一个滚动条并隐藏它，这样你就可以滚动菜单，但不需要显示真正的滚动条（或者如果你愿意，你可以把它留给你：）

以下是我尝试过的->

.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实际上使它位于一条可展开的行：）

*这会隐藏它（如果您愿意，可以跳过它）

这是正在工作的JSFIDLE

---

我希望我能帮助你：）

对我有用。谢谢你，先生：这是我的工作。谢谢，先生