无法为选项卡内容设置边框顶部

Question

我无法为 tab-content class 设置 border-top。

虽然，我已经声明了border-top。它不是设置。

HTML

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

CSS

.tab-content {
  border-top: 0.1em solid rgb(221, 219, 219);
  border-bottom: 0.1em solid rgb(221, 219, 219);
  border-right: 0.1em solid rgb(221, 219, 219);
  border-left: 0.1em solid rgb(221, 219, 219);
  width: 500px;
  padding: 2%;
  background-color: white;
  border-radius: 15px;
}

.nav-tabs {
  border-bottom: none;
  margin-bottom: 0;
  margin-left: 20px;
  margin-top: 25px;
}

Fiddle Here

Answer 1

如您在 my fiddle 中所见，您所要做的就是更改 margin-bottom: -1px; 可制表 li 标签。

它们覆盖了您的 .tab-content，因此现在显示顶部边框，因为 li 的白色背景在边框上方。将它们向上移动到那个间距像素，您可以看到边框。

无法为选项卡内容设置边框顶部

Unable to set border-top for tab-content

html

css

tabs

twitter-bootstrap

twitter-bootstrap-3