首页 文章

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

提问于
浏览 次
57

我想知道是否有办法使用bootstrap为连接到药丸边框的标签内容提供边框，这样看起来就像一个盒子 . 我尝试使用自己的css进行此操作，但是标签药丸边框和标签内容边框之间有一个 Headers ，这是标签药丸需要具有的边距，并且无法删除 . 我希望它看起来像下面的图像 .
tab content with border

twitter-bootstrap tabs

7 回答

  • 4

    以下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上的填充使得内容未按左侧和右侧的新边框 .

    回复于
  • 3

    我会修改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;
}
    回复于
  • 54

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

    .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，则第一个选项卡会与左上半径内容冲突 .

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

    回复于
  • 82

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

    放入 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/）

    回复于
  • 2

    我修改了@ 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>
    回复于
  • 5

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

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

相关问题