web-dev-qa-db-ja.com

bootstrapタブの内容に境界線を付ける方法

bootstrapタブを使用していますが、完全に機能します。 bootstrapを使用して、錠剤の境界線に接続されているタブのコンテンツに境界線を付けて、1つのボックスのようにする方法があるかどうかを把握しようとしています。私は自分のCSSでこれを試しましたが、タブピルの境界とタブコンテンツの境界の間にキャップがあり、タブピルに必要なマージンであり、削除できません。下の画像のように見せたいです。 tab content with border

twitter-bootstraptabs
62
user1404536

次のCSSはあなたが探しているものを正確に行う必要があります:)

.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

マージン-ボトム：0;on。nav-tabs錠剤と内容物の間のギャップを取り除きます。

paddingon。tab-contentは、コンテンツが左右の新しい境界線。

86
Kisuka

次に対するKisukaの答えを修正します。

CSS

.tab-pane {

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.nav-tabs {
    margin-bottom: 0;
}

Bootstrap 4のSCSS

.tab-pane {
    border-left: 1px solid $nav-tabs-border-color;
    border-right: 1px solid $nav-tabs-border-color;
    border-bottom: 1px solid $nav-tabs-border-color;
    border-radius: 0px 0px $nav-tabs-border-radius $nav-tabs-border-radius;
    padding: $spacer;
}

.nav-tabs {
    margin-bottom: 0;
}
57
user3749683

@goatソリューションよりもDRYであるため、パネルCSSを次のように再利用することもできます。

.tab-content.panel
{
    border-top: none; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px;
}


<div>
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content panel">
        <div class="tab-pane panel-body">
            ...
        </div>
    </div>
</div>

tab-contentパネルpanel-defaultおよびtab-pane panel-body。その後、境界線とパディングを再定義する必要はありません。上の境界線と上の半径を削除するだけです。

5
djmj

次のコードでは、すべてのコーナーに半径がありますが、タブはオフセットされています。

.nav-tabs {
    padding-left: 15px;
    margin-bottom: 0;
    border: none;
}
.tab-content {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
}

注意：nav-tabのpadding-left 0pxを設定すると、最初のタブは左上のコンテンツの半径と競合します。

5
amrocs

これはずっと前に尋ねられましたが、ここでのトリックは一部の人々を助けるかもしれません：

div.containerを.nav-tabsと.tab-contentに入れます。そのdiv.containerに、300pxとborder-bottom: 1px solid #cccおよびoverflow: hidden !importantと言う固定高さを与えます。

次に、.tab-contentに次のcssを追加します：height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

そしてそれは動作します。試してみてください（ http://jsfiddle.net/996Bw/ ）

3
idris

既存のbootstrapスタイルの定義を変更する必要がないように、@ user3749683と@Kisukaの回答を変更しました。代わりに、親クラスに新しいクラスを追加するだけです。最初に子セレクターを使用したため、必ずしも境界線のあるコンテンツも必要としないネストされたタブを使用できます。

.bordered-tab-contents > .tab-content > .tab-pane {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
}

.bordered-tab-contents > .nav-tabs {
    margin-bottom: 0;
}

マークアップ構造

<div class="bordered-tab-contents">
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content">
        <div class="tab-pane" ...>
            ...
        </div>
    </div>
</div>
2
goat