Css 移动友好引导面包屑标签

我很难找到一个地方开始使引导标签移动友好。我喜欢它们在桌面上的外观，但不喜欢它们在手机上堆叠的方式

有人能帮我用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%;
       }

/*选项卡形状*/
.nav pills>li.active>a、.nav pills>li.active>a:聚焦、.nav pills>li.active>a:悬停{
边界：0；
背景色：#fff；
}
.nav药丸>li>a{
/*填充：10px 70px*/
}
.nav药丸>li.active{
边框底部：3px实心#005DA8！重要；
}
.面包屑{
背景：ddd；
背景色：#e9ecef！重要；
显示：内联块！重要；
填充：1px；
右侧填充：15px；
}
李面包屑{
显示：内联块；
背景：白色；
填充：0；
位置：相对位置；
最小宽度：50px；
文字装饰：无；
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
右边距：-13px；
}
.面包屑李#最后{
-webkit剪辑路径：多边形（0 0，计算（100%-0px）0，100%50%，计算（100%-0px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-0px）0，100%50%，计算（100%-0px）100%，0 100%，15px 50%）；
}
.面包屑李：悬停{
颜色：白色；
背景：#fff；
}
/*第一个链接不应该有任何剪辑在左侧*/
.面包屑李：第一个孩子{
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%）；
}
.标签{
身高：100%；
宽度：100%；
}

就是这样： 给出

宽度：100vw到引导类的
.col-sm-3、.col-md-3、.col-lg-3
，并在引导类的
链接
标记后重写它们

添加到
标题
部分中的
样式
标记：

    .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
，并将它们放入引导
行

HTML:













检查：

调整大小以查看效果。
谢谢
 你要小心让手机上的东西看起来像桌面上的东西。有人让它看起来不像那样是有原因的，通常是因为UX在移动设备上很糟糕。我同意堆叠不是最好的东西，但它仍然是功能性的，而不是试图阅读超小的文字。也许可以试试百思买网站的产品？在那里你仍然可以回到最后一个“面包屑”，但它只显示了你所在的那一个？
<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>