話不多說，先上效果圖
如何實現這種列向的tab切換呢，我圖片用的字體圖標，隨便自己
html代碼

<div class="col-md-1"><ul class="nav nav-pills nav-stacked"><li role="presentation" class="active"><a href="#news01" data-toggle="tab" role="tab"><i class="icon-news01"></i></a></li><li role="presentation"><a href="#news02" data-toggle="tab" role="tab"><i class="icon-news02"></i></a></li><li role="presentation"><a href="#news03" data-toggle="tab" role="tab"><i class="icon-news03"></i></a></li><li role="presentation"><a href="#news04" data-toggle="tab" role="tab"><i class="icon-news04"></i></a></li></ul></div><div class="col-md-6 "><div class="tab-content"><div role="tabpanel" class="tab-pane fade in active" id="news01">11</div><div role="tabpanel" class="tab-pane fade " id="news02">22</div><div role="tabpanel" class="tab-pane fade " id="news03">33</div><div role="tabpanel" class="tab-pane fade " id="news04">44</div></div></div>

css代碼

#news{padding:50px 0} #news .news-title{padding:20px 0px;font-size:18px;font-weight:400;text-align: center;border-bottom:1px dashed #c0c0c0;position:relative;margin-right:10px; } #news .news-title::after{content:'';display: inline-block;width: 10px;height: 10px;border-radius: 5px;border:1px solid #c0c0c0;position:absolute;bottom:-5px;right:-10px; } .icon-news01::before{content:'\e90e';font-size: 28px;color:#EAEAEA; } .icon-news02::before{content:'\e90f';font-size: 28px;color:#EAEAEA; } .icon-news03::before{content:'\e910';font-size: 28px;color:#EAEAEA; } .icon-news04::before{content:'\e911';font-size: 28px;color:#EAEAEA; }

總結

以上是生活随笔為你收集整理的关于在bootstrap中如何做垂直排列的tab切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。