引导选项卡内容的边框

Question

我想为标签内容添加边框。所选选项卡的底部不应有边框。我发现了这个问题：how to give a border to bootstrap tab contents，但答案对我不起作用？

HTML：

<ul class="nav nav-tabs pull-right">
    <li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
    <li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
    <div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
 </div>

CSS：

body, html {
    direction: rtl;
    height: 100%;
    font-family: Tahoma;
}
.nav-tabs {
    direction: ltr;
}
#logo {
    background-color: #005CB8;
    width: 100%;
    color: white;
    padding: 4% 10%;
    -webkit-box-shadow: 20px 10px 20px #003972;
    -moz-box-shadow: 20px 10px 20px #003972;
    box-shadow: 20px 10px 20px #003972;
    border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
    display: inline;
    font-family: head;
}
#logo h1 {
    font-size: 550%;
}
#logo h4 {
    font-size: 220%;
}
.navbar-inverse {
    background-color: #477199;
    font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
    color: white;
}
.nav.navbar-nav li a {
    color: white;
}
.navbar-inverse .navbar-nav > .active {
    background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: white;
    background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #324F6B;
    color: white;
}
.category {
    text-align: center;
    margin-top: 1px;
    background-size: 100% 100%;
    padding: 15% 0;
}
.category h1 {
    color: white;
    font-family: head;
    font-size: 500%;
    text-shadow: 2px -2px black;
}
.category_start {
    margin: 0 auto;
    width: 85%;
}
.sub_categories {
    -webkit-columns: auto 3;
    /* Chrome, Safari, Opera */
    -moz-columns: auto 3;
    /* Firefox */
    columns: auto 3;
    list-style-type: disc;
    margin-top: 5px;
}
.category_start .container {
    margin-top: 10px;
}
.product_image {
    height: 80px;
    width: 80px;
}
.products_sub_list {
    margin: 10px auto 0;
    text-align: center;
    max-width: 80%;
    border-radius: 7px;
}
.products_sub_list td {
    width: 15%;
    max-width: 15%;
    padding: 0 5px;
    border: 3px solid #46617A;
}
.product {
    width: 80%;
    border: 3px solid #46617A;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
}
.product_table td {
    border: 2px solid #46617A;
    padding: 13px;
}
.product_table {
    display: inline-table;
    margin-left: 15px;
    margin-bottom: 8px;
}
.product_table td:first-child {
    font-weight: bold;
}
.page {
    width: 85%;
    margin: 0 auto;
    padding: 15px 25px;
    border: 2px solid #46617A;
    border-radius: 10px;
    background-color: #C8D0D7;
}
.register {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.register td {
    padding: 5px;
    text-align: right;
}
.register table {
    margin-right: 240px;
}
#register {
    width: 80%;
    position: absolute;
    z-index: 2;
    display: none;
    left: 0;
    right: 0;
    top: 100px;
    margin: 0 auto;
    border: 3px solid #0066FF;
    background-color: #CCE0FF;
    text-align:center;
    border-radius: 10px;
}
#bbg {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.tab-content {
    border: 1px solid #ddd;
    padding: 1px;
}

JSFiddle： http://jsfiddle.net/ep2drocb/7/

注意打开的标签有边框，关闭的标签也有双边框。

Answer 1

主要问题是ul 元素上的pull-right。

1. 从ul 中删除pull-right 类
2. 删除 clear-fix 元素，因为它不再需要了
3. 从 tab-content 类中删除顶部边框
4. 向右浮动lis
5. 更正选项卡锚点上的边距

相关 HTML：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
    <li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
    <div id="category_8" class="tab-pane fade in active category">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
</div>

相关 CSS：

.tab-content {
    border: 1px solid #ddd;
    border-width: 0 1px 1px; /* Removes the top border */
    padding: 1px;
}
.nav-tabs > li {
    float: right;
}
.nav-tabs > li > a {
    margin-right: 0;
    margin-left: 2px;
}

JSFiddle: http://jsfiddle.net/ep2drocb/9/

这应该会让你走上正轨。