如何为引导选项卡内容提供边框答案

【问题标题】：how to give a border to bootstrap tab contents如何为引导选项卡内容提供边框
【发布时间】：2013-03-09 22:18:54
【问题描述】：

我正在使用引导选项卡，它运行良好。我试图弄清楚是否有一种方法可以使用引导程序为连接到药丸边框的选项卡的内容提供边框，使其看起来像一个盒子。我尝试使用自己的 css 执行此操作，但选项卡药丸边框和选项卡内容边框之间有一个上限，这是选项卡药丸需要具有且无法删除的边距。我希望它看起来像下图。

【问题讨论】：

标签： twitter-bootstrap tabs

【解决方案1】：

以下 css 应该完全符合您的要求：)

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

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

.nav-tabs 上的

margin-bottom: 0; 消除了药片和内容之间的差距。

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

【讨论】：

非常感谢。我有完全相同的 css，但 tab-nav li 仍然有 -1px 的边距，这会产生这个差距。它非常非常小，但我仍然可以看到它。删除它会弄乱标签行。好吧，也许除了我之外没有人会看到它。
.nav-tabs { margin-bottom: -1px; } 做到了
如果希望tab容器底部的圆角边框与顶部匹配，可以将border-radius: 0 0 4px 4px;添加到.tab-contents
如果使用圆角边框，要使右上角正确圆角，您应该添加以下内容： .tab-pane { border-top: 1px solid #ddd;边框半径：0 4px 4px 4px； } .nav-tabs { 边框底部：0； }

【解决方案2】：

我会修改 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;
}

【讨论】：

【解决方案3】：

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

.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，第一个选项卡会与内容的左上角半径冲突。

【讨论】：

【解决方案4】：

比@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>

选项卡内容面板面板默认和选项卡面板面板主体。然后你不需要重新定义边框和填充。只需移除顶部边框和顶部半径即可。

【讨论】：

【解决方案5】：

这是很久以前问过的，但这里的技巧可能会对某些人有所帮助：

输入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/)

【讨论】：

【解决方案6】：

我修改了@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>

【讨论】：

【解决方案7】：

根据 Popnoodles 的回答，将 .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;
}

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

对于 bootstrap 5，使用 box-shadow for .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;

【讨论】：

【解决方案10】：

您可以使用以下代码来实现它：
JSfiddleDemo

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

【讨论】：