选项卡和内容之间的空白空间 - Bootstrap

Question

我的标签和内容之间有一个空格。不确定是什么导致了这一点。我认为这可能是保证金的问题。我需要删除这个空间。

HTML：

<div class="container">
   <ul class="nav nav-pills">
     <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
     <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
   </ul>

<div class="tab-content">
     <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
           <p>Loreiqua.</p>
     </div>
     <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
           <p>Ut enim ad mi</p>
     </div>
</div>
</div>

CSS：

.bootstrap-iso .nav-pills > li {
  float: left;
}
.bootstrap-iso .nav-pills > li > a {
  border-radius: 4px;
}
.bootstrap-iso .nav-pills > li + li {
  margin-left: 2px;
}
.bootstrap-iso .nav-pills > li.active > a,
.bootstrap-iso .nav-pills > li.active > a:hover,
.bootstrap-iso .nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #337ab7;
}

Answer 1

问题在于您的<h3>代码。他们正在为整体添加填充。修复非常简单;将overflow:hidden添加到.tab-content，这会强制填充在.tab-content而非上述范围内应用：

.tab-content { overflow: hidden; }

Answer 2

问题出在Bootstrap 4选项卡组件中，如果您检查空白区域的内容，则引导程序4中的div包含下一个选项卡的隐藏内容，我想很快应该有一个错误修复。