Bootstrap 4 Tabs选项卡

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="home"
            aria-selected="true">
            <h6>系统管理</h6>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#edit" role="tab" aria-controls="profile"
            aria-selected="false">
            <h6>新闻编辑</h6>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#audit" role="tab" aria-controls="contact"
            aria-selected="false">
            <h6>新闻审核</h6>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
            aria-selected="false">
            <h6>联系反馈</h6>
        </a>
    </li>
</ul>
<div class="tab-content border border-top-0" id="myTabContent" >
    <div class="tab-pane fade show active" id="admin" role="tabpanel" aria-labelledby="home-tab">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">系统管理内容</li>
        </ul>
    </div>
    <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="profile-tab">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">新闻编辑内容</li>
        </ul>
    </div>
    <div class="tab-pane fade" id="audit" role="tabpanel" aria-labelledby="contact-tab">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">新闻审核内容</li>
        </ul>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">问题反馈内容</li>
        </ul>
    </div>
</div>