將邊框線添加到標籤內容引導程序

Question

如何添加邊框線以環繞選項卡內容這裏是我正在處理的內容。

http://jsfiddle.net/0trcdLb2/

<div class="col-xs-3"> <!-- required for floating --> 
      <!-- Nav tabs --> 
      <ul class="nav nav-tabs tabs-right sideways"> 
      <li class="active"><a href="#home-vr" data-toggle="tab">Home</a></li> 
      <li><a href="#profile-vr" data-toggle="tab">Profile</a></li> 
      <li><a href="#messages-vr" data-toggle="tab">Messages</a></li> 
      <li><a href="#settings-vr" data-toggle="tab">Settings</a></li> 
      </ul> 
     </div> 

希望的輸出

Answer 1

自舉列具有填充到15px左右&。

您可以向您的div.col-xs-9元素添加一個「覆蓋」該元素的類。

這裏是爲您的右側面板中的例子：

.tab-wrapper-right { 
    margin-left: -15px; 
    border: 1px solid #ddd; 
} 

和HTML看起來像：

<div class="col-xs-9 tab-wrapper-right"> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="home-v">Home Tab.</div> 
     <div class="tab-pane" id="profile-v">Profile Tab.</div> 
     <div class="tab-pane" id="messages-v">Messages Tab.</div> 
     <div class="tab-pane" id="settings-v">Settings Tab.</div> 
    </div> 
</div> 

這裏的fiddle。

Answer 2

只是一些變化的基礎上，aifrim的修改得到完全想要的結果：

Here is

您需要手動設置高度（最好用JavaScript）如果內容會更大，像我做：

$('a[data-toggle="tab"]').on('shown.bs.tab', function() { 
     tmp = $('.tab-content').height(); 
    $('#lastLi').css('height', (tmp-133)+'px'); 
});