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

我认为您应该覆盖以下解决方案内容的tab-content和tab-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;}

Answer 2

.nav类有一个底部边距，用于在内容和标签之间创建空格。

覆盖CSS中的下边距

.nav{
    margin-bottom: 0px;   
}

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