我正在使用引导选项卡，它运行良好。我试图弄清楚是否有一种方法可以使用引导程序为连接到药丸边框的选项卡的内容提供边框，使其看起来像一个盒子。我尝试使用自己的 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;
}
引导程序 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 解决方案更干燥，您还可以重用面板 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>
选项卡内容面板面板默认和选项卡面板面板主体。然后你不需要重新定义边框和填充。只需删除顶部边框和顶部半径。
于 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 #cccand 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
基于 Popnoodles 的回答，添加也适用.border .border-top-0于.tab-paneBootstrap 4.3
<div class="tab-content">
<div class="tab-pane border border-top-0">
<!-- tab content -->
</div>
</div>
或在 SCSS
.tab-pane {
@extend .border;
@extend .border-top-0;
@extend .p-3;
}
于 2019-09-08T12:45:51.373 回答
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 回答
0
对于 bootstrap 5，使用box-shadowfor.tab-content可能会起作用，因为.nav-tabs它也在使用它。
border: 0;
box-shadow: 0px 1px 0px #b1b4b6, 1px 0px 0px #b1b4b6, -1px 0px 0px #b1b4b6,
-1px 1px 0px #b1b4b6, 1px 1px 0px #b1b4b6, 1px -1px 0px #b1b4b6,
-1px -1px 0px #b1b4b6;
于 2021-11-05T21:09:34.193 回答
-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 回答