bootstrap4选项卡的布局教程

内容：

<section id='news'>  
        <p class='container news-content d-flex justify-content-center'>  
            <p class='news-title'>  
                <span>全部新闻</span>  
            </p>  
            <ul class="nav nav-tabs news-tablist" role="tablist">  
                <li class="nav-item">  
                    <a class="nav-link active" data-toggle="tab" href="#allnews" data-title="全部新闻">  
                        <i class='icon-allnews'></i>  
                    </a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" data-toggle="tab" href="#meiti" data-title="媒体报道">  
                        <i class='icon-meiti'></i>  
                    </a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" data-toggle="tab" href="#toutiao" data-title="头条">  
                        <i class='icon-toutiao'></i>  
                    </a>  
                </li>  
                <li class="nav-item">  
                    <a class="nav-link" data-toggle="tab" href="#zixun" data-title="咨询">  
                        <i class='icon-zixun'></i>  
                    </a>  
                </li>  
            </ul>  

css：

#news .news-tablist {
    display: flex;
    flex-direction:column;纵向排列
    border-bottom:none;
}
#news .news-tablist i.icon-allnews::before {
    content: '\e90e';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-meiti::before {
    content: '\e90f';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-toutiao::before {
    content: '\e910';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-zixun::before {
    content: '\e911';
    font-size:30px;
    color: white;
}
#news .news-tablist li a:hover {
    background: #E9232C;
}

图示：