Question

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

这是指向它的链接。

这是我正在使用的代码。

<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

如果您只想在移动设备中滚动它，最简单的方法就是添加一个滚动条并将其隐藏，这样您就可以滚动菜单但没有显示真正的滚动条（或者如果您愿意的话）可以让它由你决定：）

这是我尝试过的 - ＆gt;

.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/ 我希望我能帮到你:)。

侧滚动移动标签

1 个答案: