html - Twitter Bootstrap 选项卡栏有边框

Question

我已经加载了 twitter 引导程序，一切正常，我想要一个标签栏，在主要区域周围有边框，如下所示：

这是标签条码：

<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;
}

但我在标签内有一个边框，如您在此处看到的： //jsfiddle.net/pMSMT/

为了得到正确的结果，我应该改变什么课程？

Answer 1

我认为您应该在解决方案下面覆盖选项卡内容和选项卡窗格的类，这对我有用。

.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;}

Answer 2

该类.nav有一个底部边距，它在您的内容和选项卡之间创建空间。

覆盖 CSS 中的下边距

.nav{
    margin-bottom: 0px;   
}

工作示例 http://jsfiddle.net/pMSMT/1/