css - 如何摆脱 Bootstrap 标签页中的两个栏

Question

我的 Bootstrap 选项卡如下所示:

如您所见，两个红色箭头所指的是我需要去掉的两个水平条。它们不是边界。我该如何摆脱它们？

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: black;
  /*rgb(240,90,42);*/
  font-weight: bold;
  background-color: rgb(230, 230, 172);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  border: solid 1px rgb(204, 205, 90);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-tabs>li>a {
  color: black;
  /*rgb(240,90,42);*/
  font-weight: bold;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.tab-pane {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.tab-content {
  border-left: 1px solid rgb(204, 205, 90);
  border-right: 1px solid rgb(204, 205, 90);
  border-bottom: 1px solid rgb(204, 205, 90);
  border-radius: 15px;
  padding: 10px;
}

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#studentsTabPage">Students</a></li>
  <li><a data-toggle="tab" href="#studentDetailsTabPage">Student Details</a></li>
  <li><a data-toggle="tab" href="#exclusionsTabPage">Exclusions & Inclusions</a></li>
</ul>

<div class="tab-content">
  <div id="exclusionsTabPage" class="tab-pane fade">

  </div>

  <div id="studentDetailsTabPage" class="tab-pane fade">

  </div>

  <div id="exclusionsTabPage" class="tab-pane fade">

  </div>
</div>

Answer 1

移除此类 .nav-tabs 的底部边框并为此类 .tab-content 添加顶部边框

 .tab-content {
    border: 1px solid rgb(204,205,90);
    border-radius: 15px;
    padding: 10px;
  }

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

检查这个 Fiddle