0

我有以下 HTML 和 CSS：http: //jsfiddle.net/dSJGe/

<div class="tabbable">
    <ul id="myTab" class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="home">
         <fieldset>xxx</fieldset>
      </div>
      <div class="tab-pane fade in " id="profile">test</div>
    </div>
</div>

fieldset {
    border: 1px solid #d9d9d9;
padding: 1em 1.667em 1.667em 1.667em;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
margin-bottom: 1.667em;
position: relative;
z-index: 89;
padding-top: 1.667em;   
}

我想要的是将选项卡底部边框和字段集顶部边框结合起来。Also when the active tab is selected I would like that to show a white border at the bottom of that tab to make it look like the tab is connected to the fieldset area.

我已经尝试了下边距、z-index 和其他所有内容的所有组合，但仍然无法使其正常工作。有没有其他人想出这样的解决方案？

4

2 回答 2

0

将自定义样式添加到.nav.

改变：

<ul id="myTab" class="nav nav-tabs">到
<ul id="myTab" class="nav nav-tabs" style="margin-bottom: 0;">.

我已经添加了margin-bottom:0，因为默认情况下 inbootstrap.css .nav的下边距为 20px。只需删除它，它就可以工作:)。

演示。

于 2013-07-18T10:47:50.420 回答
0

而不是使用字段集的样式，为什么不应用于选项卡窗格？我也编辑了一些样式。将此 CSS 代码复制并粘贴到您的示例中：

.nav-tabs {margin-bottom:0px;}
.tab-pane {
    border: 1px solid #d9d9d9;
    border-top:0;
    padding: 1.667em;
    margin-bottom: 1.667em;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-border-radius: 0 0 0.25em 0.25em;
    -moz-border-radius: 0 0 0.25em 0.25em;
    border-radius: 0 0 0.25em 0.25em;
}

这将使标签内容全部相等

于 2013-07-18T11:08:07.707 回答