twitter-bootstrap 如何为引导标签内容提供边框

how to give a border to bootstrap tab contents

提问by user1404536

I'm using bootstrap tabs and it works perfectly. I'm trying to figure out if there is a way to use bootstrap to give a border to the contents of the tabs that is connected to the border of the pill so it will look like one box. I tried doing this with my own css, but there is a cap between the tab pill border and tab content border that is a margin the tab pill needs to have and can't be removed. I want it to look like the below image.

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

回答by Kisuka

The following css should do exactly what you're looking for :)

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

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

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

margin-bottom: 0;on .nav-tabsremoves the gap in between the pills and content.

底边距：0；在.nav-tabs 上消除了药丸和内容之间的差距。

The paddingon .tab-contentmakes the content not pressed against the new borders on the left and right.

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

回答by user3749683

I would modify Kisuka's answer to the following:

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

CSS

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

SCSS for Bootstrap 4

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

回答by amrocs

With following code, all corner have radius, but tabs offset.

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

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

Caution: If you set nav-tab's padding-left 0px, first tab conflicts with left-top radius of contents.

注意：如果您将导航标签的 padding-left 设置为 0px，第一个标签会与内容的左上角半径冲突。

回答by djmj

Being more DRY then @goat solution, you could also reuse the panel css like:

比@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 and tab-pane panel-body. Then you don't need to redefine the border and padding. Just remove the top border and top radius.

tab-content panel panel-default 和 tab-pane panel-body。那么你不需要重新定义边框和填充。只需删除顶部边框和顶部半径。

回答by idris

This was asked a long time ago but the trick here might help some people:

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

Put in a div.containeryour .nav-tabsand .tab-content. To that div.container, give a fixed height says 300pxand border-bottom: 1px solid #cccand overflow: hidden !important.

放入一个div.container你的.nav-tabs和.tab-content。为此div.container，给一个固定的高度说300像素和border-bottom: 1px solid #ccc和overflow: hidden !important。

Then to the .tab-content, I add this css: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

然后到.tab-content，我添加这个 css：height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

And it works. Try it out ( http://jsfiddle.net/996Bw/)

它有效。试试看（http://jsfiddle.net/996Bw/）

回答by goat

I modified the answer's by @user3749683 and @Kisuka so that you don't have to change the definition of any existing bootstrap styles. Instead, you just add a new class to the parent element. I used first child selectors so that you can have nested tabs that don't necessarily need to have the bordered content too.

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

markup structure

标记结构

<div class="bordered-tab-contents">
    <ul class="nav nav-tabs">
        ...
    </ul>

    <div class="tab-content">
        <div class="tab-pane" ...>
            ...
        </div>
    </div>
</div>

回答by Chris Gunawardena

Based on Popnoodles answer, adding .border .border-top-0to .tab-panealso works in Bootstrap 4.3

基于 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>

or in SCSS

或在 SCSS

.tab-pane {
  @extend .border;
  @extend .border-top-0;
  @extend .p-3;
}

回答by Shail

You can use the following code to achieve it :
JSfiddle Demo

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

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