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 或

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滑动制表符(非制表符内容)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！