ブートストラップ タブを使用していますが、完全に機能します。ブートストラップを使用して、ピルの境界線に接続されているタブの内容に境界線を付けて、1 つのボックスのように見せる方法があるかどうかを調べようとしています。独自の css でこれを実行しようとしましたが、タブ ピルの境界線とタブ コンテンツの境界線の間にキャップがあり、タブ ピルに必要なマージンであり、削除できません。下の画像のようにしたいです。
88381 次
10 に答える
98
次の css は、探していることを正確に実行する必要があります:)
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}
マージン底: 0; on .nav-tabsは、錠剤とコンテンツの間のギャップを取り除きます。
.tab-contentのパディングにより、コンテンツが左右の新しい境界線に押し付けられなくなります。
于 2013-03-09T23:24:55.450 に答える
63
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;
}
于 2014-06-17T18:10:34.740 に答える
5
@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 panel-default および tab-pane panel-body。その後、ボーダーとパディングを再定義する必要はありません。上の境界線と上の半径を削除するだけです。
于 2016-09-17T13:32:10.043 に答える
5
次のコードでは、すべてのコーナーに半径がありますが、タブはオフセットされています。
.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 を設定すると、最初のタブがコンテンツの左上の半径と競合します。
于 2016-03-17T09:24:50.513 に答える
3
これはずっと前に尋ねられましたが、ここのトリックは一部の人々を助けるかもしれません:
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/ )
于 2013-12-22T17:07:25.150 に答える
2
既存のブートストラップ スタイルの定義を変更する必要がないように、@ 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>
于 2016-08-04T20:15:18.550 に答える
1
これは、コンテンツをナビゲーション タブに揃えるブートストラップのみを使用する例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="container border-right border-left border-bottom">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem possimus in temporibus nemo dolorem? Nemo quibusdam, rem deleniti adipisci eveniet voluptas enim provident voluptates voluptate sit! Similique voluptatem accusamus officia?
</div>
</div>
</body>
</html>于 2020-11-04T09:58:35.140 に答える
-4
次のコードを使用してそれを実現できます:
JSfiddle Demo
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
border-bottom: 1px solid #dddddd;
outline:0;
}
}
于 2013-03-10T02:56:36.080 に答える