Question

我正在使用引导选项卡，它运行良好。我试图弄清楚是否有一种方法可以使用bootstrap为连接到药丸边框的标签内容提供边框，这样它就像一个盒子。我尝试使用自己的css进行此操作，但是标签药丸边框和标签内容边框之间有一个标题，这是标签药丸需要具有的边距，并且无法删除。我希望它看起来像下面的图像。 tab content with border

Answer 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 上的填充会使内容未按左右边的新边框进行操作。

Answer 2

我会修改Kisuka对以下内容的回答：

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

Answer 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，则第一个标签会与左上半径内容冲突。

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

tab-content面板 - 默认和tab-pane panel-body。然后，您不需要重新定义边框和填充。只需删除顶部边框和顶部半径。

Answer 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/）

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

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

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

Answer 9

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

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

如何为bootstrap选项卡内容提供边框

9 个答案: