css - 移动友好的 Bootstrap 面包屑标签

Question

我很难找到一个地方来开始使 Bootstrap 选项卡移动友好。我喜欢它们在桌面上的外观，但不喜欢它们在移动设备上相互堆叠的方式。

任何人都可以帮助我使用 css 来缩小选项卡，使其看起来与桌面上的外观相似吗？

您可以在下面找到我的 html 和 css。

    <div class="centerTab">
        <div class="container breadcrumb">
          <ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-1" role="tab">Your Information</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-2" role="tab">Service Requirements</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-3" role="tab">Documents Needed</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-4" role="tab">Thank You!</a>
            </li>
        </ul>
    </div>      

      /* tab shape */
      .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
        border:0;
        background-color:#fff;
        }
        .nav-pills > li > a {
            /* padding:10px 70px; */
        }
         .nav-pills > li.active {
         border-bottom:3px solid #005DA8!important;
         }

       .breadcrumb {
               background: #ddd;
               background-color: #e9ecef!important;
               display: inline-block!important;
               padding: 1px;
               padding-right: 15px; 
       }

       .breadcrumb li {
           display: inline-block;
           background: white;
           padding: 0;
           position: relative;
           min-width:50px;
           text-decoration: none;
           -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
           clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
           margin-right: -13px;
       }

       .breadcrumb li#last {
           -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
           clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
       }

       .breadcrumb li:hover {
           color: white;
           background: #fff;
       }

       /* first link should not have anything cliped on the left side */
       .breadcrumb li:first-child {
           -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
           clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
       }

       .label{
           height: 100%;
           width: 100%;
       }

Answer 1

就是这样: 将 width: 100vw; 赋给 Bootstrap 类的 .col-sm-3,.col-md-3,.col-lg-3 并在 之后覆盖它们bootstrap 的 link 标签

在 head 部分添加到 style 标签:

    .col-sm-3,
    .col-md-3,
    .col-lg-3 {
        position: relative;
        width: 100vw;
        padding-right: 15px;
        padding-left: 15px
    }

并将 html 的导航项除以 .col-sm-3,.col-md-3,.col-lg-3 并将它们放入 Bootstrap 行

HTML:

<div class="centerTab">
        <div class="container breadcrumb">
            <ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
                <div class="row">
                    <li class="nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-1" role="tab">Your Information</a>
                    </li>
                    <li class="nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-2" role="tab">Service
                            Requirements</a>
                    </li>
                    <li class="nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-3" role="tab">Documents Needed</a>
                    </li>
                    <li class="nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-4" role="tab">Thank
                            You!</a>
                    </li>
            </ul>
            </div>
        </div>

检查: https://jsfiddle.net/sugandhnikhil/hLekd05v/

调整大小以查看效果。 谢谢!!!!!!!!!