为什么spatie/vue标签组件在Vuejs 2/Bootstrap 4应用程序中看起来很难看?

在我的Laravel 5.7/Vuejs 2.6/Vuex 3.1/Bootstrap 4.3应用程序中,我安装了spatie/vue tabs组件( https://github.com/spatie/vue-tabs-component ) 并添加了css代码freom提供的链接: https://github.com/spatie/vue-tabs-component/blob/master/docs/resources/tabs-component.css 但组件看起来很难看: https://imgur.com/a/uCuCX9p

我向tabs组件类添加了绿色边框,以确保它被应用。我看到了。

整个页面都有代码:

<template>
    <div class="container">


        <div class="row p-4">
            <tabs :options="{ useUrlFragment: false }" @clicked="tabClicked" @changed="tabChanged">
                <tab name="First tab">
                    This is the content of the first tab
                </tab>
                <tab name="Second tab">
                    This is the content of the second tab
                </tab>
                <tab name="Disabled tab" :is-disabled="true">
                    This content will be unavailable while :is-disabled prop set to true
                </tab>
                <tab id="oh-hi-mark" name="Custom fragment">
                    The fragment that is appended to the url can be customized
                </tab>
                <tab prefix="<span class='glyphicon glyphicon-star'></span> "
                     name="Prefix and suffix"
                     suffix=" <span class='badge'>4</span>">
                    A prefix and a suffix can be added
                </tab>
            </tabs>
        </div>


    </div>
</template>

<script>
    import {bus} from '../../app';
    import appMixin from '../../appMixin';
    import Vue from 'vue';

    import {Tabs, Tab} from 'vue-tabs-component'; // https://github.com/spatie/vue-tabs-component
    Vue.component('tabs', Tabs);
    Vue.component('tab', Tab);

    export default {

        name:'test',
        mixins: [appMixin],

        created() {
        }, //  created() {

        computed: {
        },

        mounted() {
            alert( "resources/js/components/Test.vue mounted::"+(-1) )
            console.log('Test Component mounted.')
            this.setAppTitle( '', 'Test', bus);
        },

        methods: {
            tabClicked(selectedTab) {
                console.log('Current tab re-clicked:' + selectedTab.tab.name);
            },
            tabChanged(selectedTab) {
                console.log('Tab changed to:' + selectedTab.tab.name);
            },
        },

    }
</script>

<style scoped>

    .tabs-component {
        margin: 4em 0;
        border: 2px dotted green !important;
    }

    .tabs-component-tabs {
        /*border: solid 1px #ddd;*/
        border-radius: 6px;
        margin-bottom: 5px;
        border: 2px dotted red !important;
    }

    @media (min-width: 700px) {
        .tabs-component-tabs {
            border: 0;
            align-items: stretch;
            display: flex;
            justify-content: flex-start;
            margin-bottom: -1px;
        }
    }

    .tabs-component-tab {
        color: #999;
        font-size: 14px;
        font-weight: 600;
        margin-right: 0;
        list-style: none;
    }

    .tabs-component-tab:not(:last-child) {
        border-bottom: dotted 1px #ddd;
    }

    .tabs-component-tab:hover {
        color: #666;
    }

    .tabs-component-tab.is-active {
        color: #000;
    }

    .tabs-component-tab.is-disabled * {
        color: #cdcdcd;
        cursor: not-allowed !important;
    }

    @media (min-width: 700px) {
        .tabs-component-tab {
            background-color: #fff;
            border: solid 1px #ddd;
            border-radius: 3px 3px 0 0;
            margin-right: .5em;
            transform: translateY(2px);
            transition: transform .3s ease;
        }

        .tabs-component-tab.is-active {
            border-bottom: solid 1px #fff;
            z-index: 2;
            transform: translateY(0);
        }
    }

    .tabs-component-tab-a {
        align-items: center;
        color: inherit;
        display: flex;
        padding: .75em 1em;
        text-decoration: none;
    }

    .tabs-component-panels {
        padding: 4em 0;
    }

    @media (min-width: 700px) {
        .tabs-component-panels {
            border-top-left-radius: 0;
            background-color: #fff;
            border: solid 1px #ddd;
            border-radius: 0 6px 6px 6px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .05);
            padding: 4em 2em;
        }
    }
</style>

这个组件bootstrap/vuejs兼容吗?

谢谢!