选项卡导航栏，激活菜单下方带有箭头

Question

＆＃13;

＆＃13;

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin: 0 2px 0 0;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
        left: 42%;
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left: 81px;
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
        left: 45%;
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

你好我想设计一个标签导航。它应该有点子弹弹出它。当我点击任何标签菜单时，箭头应显示在激活的菜单下面。上面的图像描述了我的概念。有两个标签可用，它应该显示在中心，如col-md-6＆amp; col-md-6格式。

Answer 1

如果您希望li还能在较小的设备上保持50/50分割，请同时使用col-xs-6, col-sm-6 and col-md-6。或者你可以给他们width:50%（不使用bootstrap类col- *）

同时删除边距，因为否则li并不适合（宽度：50％）

要使跨度居中（圆圈和箭头），请不要使用left:42%代替left:50%;transform:translateX(-50%)，其中left:50%取决于父级（li）宽度，{ {1}}将跨度向左移动一半宽度，因此完全位于translateX(-50%)

内

请参阅下面的代码段或JsFiddle

＆＃13;

＆＃13;

li

＆＃13;

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin:0;
				text-align:center;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
       left:50%;
			 transform:translateX(-50%);
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left:50%;
			 transform:translateX(-50%);
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
         left:50%;
			 transform:translateX(-50%);
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }

＆＃13;

＆＃13;

＆＃13;