Twitter Bootstrap 选项卡栏有边框答案

【问题标题】：Twitter Bootstrap Tab-Bar borderedTwitter Bootstrap 选项卡栏有边框
【发布时间】：2013-07-01 20:41:20
【问题描述】：

我已经加载了 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;
}

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

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

【问题讨论】：

标签： html css twitter-bootstrap styles

【解决方案1】：

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

覆盖 CSS 中的下边距

.nav{
    margin-bottom: 0px;   
}

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

【讨论】：

@NDLombardi 这能实现你的目标吗？
这就是原因。是的，完全。 Tku！

【解决方案2】：

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

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

【讨论】：