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

我正在使用引导标签，它完美的作品。 我试图找出是否有一种方法来使用引导程序来给边界的连接到药片的边界的标签的内容，所以它会看起来像一个盒子。 我试着用我自己的css做这个，但是tab tab边框和tab内容边框之间有一个帽子，这个tab tab需要有一个边距，不能被删除。 我希望它看起来像下面的图像。

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

用下面的代码，所有的angular落都有半径，但标签偏移。

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

警告：如果您设置导航标签的填充左0像素，第一个选项卡与左上angular半径的内容冲突。

Answer 4

这是很久以前问的，但这里的诀窍可能会帮助一些人：

放入一个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; height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

它工作。 试试看（ http://jsfiddle.net/996Bw/ ）

Answer 5

我修改了@ user3749683和@Kisuka的答案，以便不必更改任何现有引导样式的定义。 相反，您只需向父元素添加一个新类。 我使用了第一个子select器，以便您可以嵌套选项卡，而不一定需要边界内容。

 .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 6

更干，然后@goat解决scheme，你也可以重用面板的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> 

选项卡内容面板面板默认和选项卡面板面板主体。 那么你不需要重新定义边框和填充。 只要删除顶部边框和顶部半径。

Answer 7

您可以使用下面的代码来实现它：
JSfiddle 演示

 .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { border-bottom-color:#ddd; outline:0; } }