引导滑动选项卡（不是选项卡内容）

Question

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:

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?

Thanks in advance!

Answer 1

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 )

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

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

Answer 2

Use Horizontal timelines creatively Below is a sample code. Full demo 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>