如何给引导标签内容设置边框

小开

下面的 css 应该完全符合您的要求:)

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


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

边缘-底部: 0; 在 。导航标签上消除了药丸和内容物之间的差距。

. tab-content上的 填充物使得内容不会压在左边和右边的新边框上。

小开

您可以使用以下代码来实现这一点:
JSfiddle < a href = “ http://JSfiddle.net/shail/SLFB8/”rel = “ nofollow noReferrer”> Demo

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
border-bottom: 1px solid #dddddd;
outline:0;
}
}

小开

很久以前就有人问过这个问题，但这里的诀窍可能对一些人有帮助:

输入 div.container你的 .nav-tabs和 .tab-content。对于这个 div.container，给定一个固定的高度，即 300像素、 border-bottom: 1px solid #ccc和 overflow: hidden !important。

然后将 css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;添加到 .tab-content

它的工作原理。尝试它(http://jsfiddle.net/996Bw/)

小开

我会修改木香的回答如下:

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

小开

使用以下代码，所有角都有半径，但制表符偏移。

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

注意: 如果您设置了 nav-tab 的 pding-left 0px，那么第一个选项卡将与左上半径的内容冲突。

小开

我通过@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>

小开

比起这个解决方案，更多的是 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>

标签-内容面板-默认和标签-面板-主体。这样就不需要重新定义边框和填充了。只要删除顶部边框和顶部半径。

小开

基于 PopNoodanswer，将 .border .border-top-0添加到 .tab-pane也可以在 Bootstrap 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;
}

小开

这是一个仅使用引导程序将内容与导航标签对齐的示例。

<!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>

小开

对于引导程序5，使用 box-shadow对于 .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;