Bootstrap 滑动标签(不是标签内容)

Bootstrap sliding tabs (not tab content)(Bootstrap 滑动标签(不是标签内容))

问题描述

我正在开发一个项目并为我的选项卡使用引导选项卡.用户可以创建新标签，所以问题出在:超过 N 个标签(其中 N 取决于浏览器的宽度)会导致这种行为:

I'm developing a project and using Bootstrap Tabs for my tabs. Users are able to create new tabs, so here is the problem: more than N tabs (where N depends on browser's width) result on this behaviour:

我浏览了一下 Bootstrap HTML 标签代码，标签是 ul 中的 li 元素.我想实现这样的目标:

I surf a little into Bootstrap HTML tabs code, and tabs are li elements inside ul. I want to achieve something like this:

所以在右侧(和左侧)标签组件可能有一个按钮，让我的用户可以在创建的标签之间导航(如滑块).

So on right side (and left side) tabs component may have a button which let my users navigate between created tabs (like an slider).

谁能指导我实现这个目标?还是默认实现此行为的任何其他选项卡组件(例如来自其他框架)?

Anyone could guide me to this goal? Or is it any other tab component (from other framework for example) that implements this behaviour by default?

提前致谢！

推荐答案

Bootstrap OOTB 中没有任何内容，但你可以这样做:http://codeply.com/go/43ARTwZuie，或 https://www.codeply.com/go/Loo3CqsA7T(Bootstrap 4.3.x)

There is nothing in Bootstrap OOTB, but you can do something like this: http://codeply.com/go/43ARTwZuie, or https://www.codeply.com/go/Loo3CqsA7T (Bootstrap 4.3.x)

此方案使用jQuery检查标签容器中的宽度，然后相应地调整标签的位置.

This solution uses jQuery to check the width in the tabs container, and then adjust the position of the tabs accordingly.

另一种选择是将溢出的选项卡放入如下下拉列表中:http://www.bootply.com/7oAli9A9zL#

Another option is to put the overflowing tabs into a dropdown like this: http://www.bootply.com/7oAli9A9zL#

这篇关于Bootstrap 滑动标签(不是标签内容)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！