diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 390624cf..3f2c02f9 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,75 +1,19 @@
-<!--<template>-->
-<!--    <Tabs :animated="false" value="name1">-->
-<!--        <Tab-pane label="标签一" name="name1">-->
-<!--            <Table :columns="columns1"></Table>-->
-<!--        </Tab-pane>-->
-<!--        <Tab-pane label="标签二" name="name2">-->
-<!--            <Table :columns="columns1"></Table>-->
-<!--        </Tab-pane>-->
-<!--        <Tab-pane label="标签三" name="name3">-->
-<!--            <Table :columns="columns1"  ></Table>-->
-<!--        </Tab-pane>-->
-<!--    </Tabs>-->
-<!--</template>-->
-<!--<script>-->
-<!--    export default {-->
-<!--        data() {-->
-<!--            return {-->
-<!--                columns1: [-->
-<!--                    {-->
-<!--                        title: '姓名',-->
-<!--                        key: 'name'-->
-<!--                    },-->
-<!--                    {-->
-<!--                        title: '年龄',-->
-<!--                        key: 'age'-->
-<!--                    },-->
-<!--                    {-->
-<!--                        title: '地址',-->
-<!--                        key: 'address'-->
-<!--                    }-->
-<!--                ],-->
-<!--                data1: [-->
-<!--                    {-->
-<!--                        name: '王小明',-->
-<!--                        age: 18,-->
-<!--                        address: '北京市朝阳区芍药居'-->
-<!--                    },-->
-<!--                    {-->
-<!--                        name: '张小刚',-->
-<!--                        age: 25,-->
-<!--                        address: '北京市海淀区西二旗'-->
-<!--                    },-->
-<!--                    {-->
-<!--                        name: '李小红',-->
-<!--                        age: 30,-->
-<!--                        address: '上海市浦东新区世纪大道'-->
-<!--                    },-->
-<!--                    {-->
-<!--                        name: '周小伟',-->
-<!--                        age: 26,-->
-<!--                        address: '深圳市南山区深南大道'-->
-<!--                    }-->
-<!--                ]-->
-<!--            }-->
-<!--        }-->
-<!--    }-->
-<!--</script>-->
 <template>
-    <div>
-        <Button @click="showSecond = !showSecond">change</Button>
-        <Tabs value="name1">
-            <TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane>
-            <TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane>
-            <TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane>
-        </Tabs>
-    </div>
+    <Tabs type="card">
+        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
+        <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
+    </Tabs>
 </template>
 <script>
     export default {
         data () {
             return {
-                showSecond: false
+                tabs: 20
+            }
+        },
+        methods: {
+            handleTabsAdd () {
+                this.tabs ++;
             }
         }
     }
diff --git a/src/styles/components/tabs.less b/src/styles/components/tabs.less
index 1db748e1..1e992426 100644
--- a/src/styles/components/tabs.less
+++ b/src/styles/components/tabs.less
@@ -66,22 +66,27 @@
         margin-left: 5px;
     }
 
-    &-nav-prev{
-        position:absolute;
+    &-nav-prev, &-nav-next{
+        width: 32px;
+        text-align: center;
+        position: absolute;
         line-height: 32px;
         cursor: pointer;
-        left:0;
+        i{
+            font-size: 16px;
+        }
+    }
+
+    &-nav-prev{
+        left: 0;
     }
 
     &-nav-next{
-        position:absolute;
-        line-height: 32px;
-        cursor: pointer;
-        right:0;
+        right: 0;
     }
 
     &-nav-scrollable{
-        padding: 0 12px;
+        padding: 0 32px;
     }
 
     &-nav-scroll-disabled{