将边框线添加到选项卡内容引导程序

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

Bootstrap列左侧有填充＆am​​p; 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');
});