内容：
<section id='news'> <div class='container news-content d-flex justify-content-center'> <div class='news-title'> <span>全部新闻</span> </div> <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; }图示：
文章来源: bootstrap4选项卡如何布局