如何为引导标签内容提供边框 [英] how to give a border to bootstrap tab contents

问题描述

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

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 应该完全符合您的要求 :)

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

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

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

ma​​rgin-bottom: 0; .nav-tabs 消除了药丸和内容之间的间隙.

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

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

The padding on .tab-content makes the content not pressed against the new borders on the left and right.

这篇关于如何为引导标签内容提供边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！