Bootstrap 滑动标签（不是标签内容）
Bootstrap sliding tabs (not tab content)
我正在开发一个项目并使用 Bootstrap 选项卡作为我的选项卡。用户能够创建新的标签，所以问题是：超过 N 个标签（其中 N 取决于浏览器的宽度）导致此行为：
我浏览了一些 Bootstrap HTML 标签代码，标签是 ul 中的 li 个元素。我想实现这样的目标：
所以在右侧（和左侧）选项卡组件可能有一个按钮，让我的用户在创建的选项卡之间导航（如滑块）。
任何人都可以指导我实现这个目标吗？还是默认实现此行为的任何其他选项卡组件（例如来自其他框架）？
提前致谢！
Bootstrap OOTB 中没有任何内容，但您可以这样做：
http://codeply.com/go/43ARTwZuie, or https://www.codeply.com/go/Loo3CqsA7T (Bootstrap 4.3.x)
此解决方案使用 jQuery 检查选项卡容器中的宽度，然后相应地调整选项卡的位置。
另一种选择是将溢出的选项卡放入下拉列表中，如下所示：http://www.bootply.com/7oAli9A9zL#
创造性地使用水平时间轴
下面是一个示例代码。
完整演示 https://codyhouse.co/demo/horizontal-timeline/index.html
<!-- Main content -->
<section class="content">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h3 class="page-title">Horizontal Timeline</h3>
<div class="d-inline-block align-items-center">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
<li class="breadcrumb-item" aria-current="page">UI</li>
<li class="breadcrumb-item active" aria-current="page">Horizontal Timeline</li>
</ol>
</nav>
</div>
</div>
<div class="right-title">
<div class="dropdown">
<button class="btn btn-outline dropdown-toggle no-caret" type="button" data-toggle="dropdown"><i class="mdi mdi-dots-horizontal"></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="mdi mdi-share"></i>Activity</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-email"></i>Messages</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-help-circle-outline"></i>FAQ</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-settings"></i>Support</a>
<div class="dropdown-divider"></div>
<button type="button" class="btn btn-rounded btn-success">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box">
<section class="cd-horizontal-timeline">
<div class="timeline">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="16/01/2018" class="selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2018">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2018">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2018">20 May</a></li>
<li><a href="#0" data-date="09/07/2018">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2018">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2018">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2018">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2018">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2019">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2019">3 Mar</a></li>
</ol> <span class="filling-line" aria-hidden="true"></span> </div>
<!-- .events -->
</div>
<!-- .events-wrapper -->
<ul class="cd-timeline-navigation">
<li><a href="#0" class="prev inactive">Prev</a></li>
<li><a href="#0" class="next">Next</a></li>
</ul>
<!-- .cd-timeline-navigation -->
</div>
<!-- .timeline -->
<div class="events-content">
<ol>
<li class="selected" data-date="16/01/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/1.jpg"> Horizontal Timeline<br/><small>January 16th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="28/02/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/2.jpg"> Horizontal Timeline<br/><small>Feb 28th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="20/04/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/3.jpg"> Horizontal Timeline<br/><small>March 20th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="20/05/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/4.jpg"> Horizontal Timeline<br/><small>May 20th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="09/07/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/5.jpg"> Horizontal Timeline<br/><small>July 9th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="30/08/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/6.jpg"> Horizontal Timeline<br/><small>August 30th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="15/09/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/7.jpg"> Horizontal Timeline<br/><small>September 15th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="01/11/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/8.jpg"> Horizontal Timeline<br/><small>November 01st, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="10/12/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/9.jpg"> Horizontal Timeline<br/><small>December 10th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="19/01/2019">
<h2>Event title here</h2> <em>January 19th, 2019</em>
<p> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. </p>
</li>
<li data-date="03/03/2019">
<h2>Event title here</h2> <em>March 3rd, 2019</em>
<p> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. </p>
</li>
</ol>
</div>
<!-- .events-content -->
</section>
</div>
</div>
</div>
</section>
我正在开发一个项目并使用 Bootstrap 选项卡作为我的选项卡。用户能够创建新的标签，所以问题是：超过 N 个标签（其中 N 取决于浏览器的宽度）导致此行为：
我浏览了一些 Bootstrap HTML 标签代码，标签是 ul 中的 li 个元素。我想实现这样的目标：
所以在右侧（和左侧）选项卡组件可能有一个按钮，让我的用户在创建的选项卡之间导航（如滑块）。
任何人都可以指导我实现这个目标吗？还是默认实现此行为的任何其他选项卡组件（例如来自其他框架）？
提前致谢！
Bootstrap OOTB 中没有任何内容，但您可以这样做： http://codeply.com/go/43ARTwZuie, or https://www.codeply.com/go/Loo3CqsA7T (Bootstrap 4.3.x)
此解决方案使用 jQuery 检查选项卡容器中的宽度，然后相应地调整选项卡的位置。
另一种选择是将溢出的选项卡放入下拉列表中，如下所示：http://www.bootply.com/7oAli9A9zL#
创造性地使用水平时间轴 下面是一个示例代码。 完整演示 https://codyhouse.co/demo/horizontal-timeline/index.html
<!-- Main content -->
<section class="content">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h3 class="page-title">Horizontal Timeline</h3>
<div class="d-inline-block align-items-center">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
<li class="breadcrumb-item" aria-current="page">UI</li>
<li class="breadcrumb-item active" aria-current="page">Horizontal Timeline</li>
</ol>
</nav>
</div>
</div>
<div class="right-title">
<div class="dropdown">
<button class="btn btn-outline dropdown-toggle no-caret" type="button" data-toggle="dropdown"><i class="mdi mdi-dots-horizontal"></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="mdi mdi-share"></i>Activity</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-email"></i>Messages</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-help-circle-outline"></i>FAQ</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-settings"></i>Support</a>
<div class="dropdown-divider"></div>
<button type="button" class="btn btn-rounded btn-success">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box">
<section class="cd-horizontal-timeline">
<div class="timeline">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="16/01/2018" class="selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2018">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2018">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2018">20 May</a></li>
<li><a href="#0" data-date="09/07/2018">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2018">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2018">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2018">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2018">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2019">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2019">3 Mar</a></li>
</ol> <span class="filling-line" aria-hidden="true"></span> </div>
<!-- .events -->
</div>
<!-- .events-wrapper -->
<ul class="cd-timeline-navigation">
<li><a href="#0" class="prev inactive">Prev</a></li>
<li><a href="#0" class="next">Next</a></li>
</ul>
<!-- .cd-timeline-navigation -->
</div>
<!-- .timeline -->
<div class="events-content">
<ol>
<li class="selected" data-date="16/01/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/1.jpg"> Horizontal Timeline<br/><small>January 16th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="28/02/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/2.jpg"> Horizontal Timeline<br/><small>Feb 28th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="20/04/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/3.jpg"> Horizontal Timeline<br/><small>March 20th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="20/05/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/4.jpg"> Horizontal Timeline<br/><small>May 20th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="09/07/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/5.jpg"> Horizontal Timeline<br/><small>July 9th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="30/08/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/6.jpg"> Horizontal Timeline<br/><small>August 30th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="15/09/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/7.jpg"> Horizontal Timeline<br/><small>September 15th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="01/11/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/8.jpg"> Horizontal Timeline<br/><small>November 01st, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="10/12/2018">
<h2><img class="img-responsive rounded pull-left mr-20 mb-10" width="60" alt="user" src="../../images/avatar/9.jpg"> Horizontal Timeline<br/><small>December 10th, 2018</small></h2>
<hr class="mt-40">
<p class="mt-40"> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
<br>
<button class="btn btn-info btn-outline mt-20">Read more</button>
</p>
</li>
<li data-date="19/01/2019">
<h2>Event title here</h2> <em>January 19th, 2019</em>
<p> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. </p>
</li>
<li data-date="03/03/2019">
<h2>Event title here</h2> <em>March 3rd, 2019</em>
<p> On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. </p>
</li>
</ol>
</div>
<!-- .events-content -->
</section>
</div>
</div>
</div>
</section>