带边距的Bootstrap选项卡

Question

我有一个Web应用程序，这是使用Bootstrap选项卡。请参见下面的图像

我想确保选项卡和文本之间有一些空格/边距

 <div class="row">
    <div class="col-lg-12">
       <h2 class="page-header">More information</h2>
    </div>
    <div class="col-lg-12">
      <ul id="myTab" class="nav nav-tabs nav-justified">
        <li class="active "><a href="#tab-one" data-toggle="tab"><i class="fa fa-tree"></i>Images</a></li>
        <li class=""><a href="#tab-two" data-toggle="tab"><i class="fa fa-car"></i>Full Description</a></li>
        <li class=""><a href="#tab-three" data-toggle="tab"><i class="fa fa-car"></i>Details</a></li>
      </ul>

    <div id="myTabContent" class="tab-content margin-bottom">
      <div class="tab-pane fade active in" id="tab-one">
          <p>Here comes the pictures</p>
      </div>

      <div class="tab-pane fade" id="tab-two">
          <p>Here comes the large description</p>
      </div>
     .......
     .......

我尝试过在CSS文件中定义以下内容：

.margin-bottom{
  margin-bottom: 1.25rem  !important ;
}

然后将该样式应用于第一个代码段的不同类，但无法使其工作。欢迎任何建议！

Answer 1

您正在尝试更新内容的底部边距。 您应该调整上边距或实际标签的下边距。所以：

#myTabContent {
  margin-top: 1.25rem;
}

或者：

#myTab {
  margin-bottom: 1.25rem;
}

（当然，根据需要修改选择器）

这是因为margin- bottom 是当前元素的底部和它下面的元素之间的空间。保证金顶部将当前元素向下推动一点，保证金底部将推动低于它的一个，降低。

Answer 2

尝试添加类clear-fix <div id="myTabContent" class="tab-content clear-fix margin-bottom">