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

私が望むのは、タブの下部境界線とフィールドセットの上部境界線を結合することです。また、アクティブなタブが選択されているときに、そのタブの下部に白い境界線を表示して、タブがフィールドセット領域に接続されているように見せたいと思います。

ボトムマージン、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デフォルトでbootstrap.css .navは 20px の下余白があるため、追加しました。それを削除するだけで機能します:)。

デモ。

于 2013-07-18T10:47:50.420 に答える