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

Question

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

Answer 1

以下css应该完全正是你要找的:)

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

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

margin-bottom:0; 在 .nav-tabs上删除了药丸和内容之间的差距.

.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.然后,您无需重新定义边框和填充.只需删除顶部边框和顶部半径即可.