html - 带边框的 Twitter Bootstrap Tab-Bar

Question

我已经加载了 twitter bootstrap 并且一切正常，我希望在主要区域周围有一个带边框的标签栏，如下所示:

这是标签栏代码:

<div class="span4">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#A" data-toggle="tab">INFO</a></li>
        <li><a href="#B" data-toggle="tab">NEWS</a></li>
        <li><a href="#C" data-toggle="tab">CONTATTACI</a></li>
      </ul>
      <div class="tabbable">
        <div class="tab-content">
          <div class="tab-pane active" id="A">
            <p>I'm in Section A.</p>
          </div>
          <div class="tab-pane" id="B">
            <p>Howdy, I'm in Section B.</p>
          </div>
          <div class="tab-pane" id="C">
            <p>What up girl, this is Section C.</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
    </div>

我尝试将 css 修改为:

.tabbable {
  *zoom: 1;
  border: 3px solid red;
}

但是我在选项卡内有一个边框，如您所见:http://jsfiddle.net/pMSMT/

为了获得正确的结果，我应该更改哪个类别？

Answer 1

我认为您应该在适合我的解决方案下方覆盖选项卡内容和选项卡 Pane 的类。

.tab-content {
padding: 10px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
background: white;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #d9d9d9;
border-radius: 0 0 4px 4px;
/*  height: 300px; */
/*  overflow-y: scroll; */}

.tab-content .tab-pane {
color: #566473;}