基于bootstrap的手机界面tab样式调整

这是调整后手机页面的样子（pc端的样式还是bootstrap原来的样式，没有改变的）：

html结构为：

        <div class="tab" role="tabpanel">
            <ul id="myTab" class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a href="#tab1" data-toggle="tab">选项1</a>
                </li>
                <li><a href="#tab2" data-toggle="tab">选项2</a></li>
                <li><a href="#tab3" data-toggle="tab">选项3</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">
                    这是选项1的内容
                </div>
                <div class="tab-pane fade" id="tab2">
                    这是选项2的内容
                </div>
                <div class="tab-pane fade" id="tab3">
                    这是选项3的内容
                </div>
            </div>
        </div>

css样式为：

    <style>
        @media only screen and (max-width: 480px) {
        .tab .nav-tabs {
            border-bottom: 0 none;
            background: #eaeaea;
        }
        .tab .nav-tabs li a {
            background: transparent;
            border-radius: 0;
            font-size: 16px;
            border: none;
            color: #333;
            padding: 12px 22px;
        }
        .tab .nav-tabs li.active a{
            border: 0;
            border-left: 1px solid lightgray;
            border-right: 0;
            border-bottom: 0;
            color: orange; 
        }
        .tab .nav-tabs li:first-child.active a{
            border-left: 0;
        }
        .tab .nav-tabs li.active a:after {
            content: "";
            position: absolute;
            left: 45%;
            bottom: -14px;
            border: 7px solid transparent;
            border-top: 7px solid #e67e22;
        }
        .tab .nav-tabs{
            width: 100%;
            background: transparent;
        }
        /* 设置选项卡的宽度,这里要根据选项卡的个数手动设置下*/
        .tab .nav-tabs li {    
            width:33.3%;
            background: transparent;
        }
        .tab .nav-tabs li a {
            text-align: center;
            margin-right: 0;
            border: 1px solid lightgray;
            border-top: 0;
            border-right: 0;
        }
        .tab .nav-tabs li:first-child a {
            border-bottom-left-radius: 0;
            border-left: 0;
        }
        .tab .nav-tabs li.active a:after {
            border: none;
        }
    }
    </style>