html - :after in Bootstrap 4 not positioning same as Boostrap 3

Question

我们有一个 Bootstrap 导航标签的默认外观。它在所选选项卡下有一个小“指示器”图标，看起来像:

这是通过样式化事件 anchor 元素创建的

.nav-tabs > li.active a:after {
        border-style: solid;
        border-width: 15px 15px 0;
        bottom: -15px;
        content: "";
        display: block;
        left: 50%;
        margin-left: -15px;
        position: absolute;
        width: 0;
    }

我们现在正在创建一些已升级到 bootstrap 4 的网站。我为选项卡外观带来了(旧版)css，但由于某种原因，指示器不再“附加”到选项卡。

HTML

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul class="pt-3 nav nav-tabs" id="nav-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        </li>
      </ul>
      <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            <p>Home Content</p>
          </div>
          <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
            <p>Profile Content</p>
          </div>
        </div>
    </div>
  </div>
</div>

CSS

.nav-tabs > li > a {
    color: #333;
    text-align: center;
    border-radius: 0;
    padding: 12px 15px;
    margin-right: 0;
    white-space: nowrap;
    font-size: 16px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    cursor: default;
}

.nav-tabs > li {
    border: 1px solid #ddd;
}

.nav-tabs > li.active a:after {
        border-style: solid;
        border-width: 15px 15px 0;
        bottom: -15px;
        content: "";
        display: block;
        left: 50%;
        margin-left: -15px;
        position: absolute;
        width: 0;
    }

.nav-tabs + .tab-content {
    border: 1px solid #ddd;
    border-top: 0 solid #ddd; /* .nav-tabs in bootstrap has border-bottom already */
}

.nav-tabs + .tab-content {
    margin-bottom: 20px;
    padding: 25px 15px 15px;
}

/* Add color, this is done in client specific file */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #fff !important;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
}
.nav-tabs > li.active {
  border-color: #007bff;
}
.nav-tabs > li a.active:after {
  border-color: #007bff transparent;
}

/* Nav Tabs - no border radius */
.nav-tabs .nav-link
{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

Javascript(内部文件加载或就绪)

// Just some js to add 'active' class to li element containing active a
// element because of legacy css as well as the .nav-tabs > li.active 
// css that I couldn't apply otherwise

$('.nav-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $(".nav-tabs li").removeClass("active");
  $(".nav-tabs li a.active").parent().addClass("active");
});
// Apply to default
$(".nav-tabs li").removeClass("active");
$(".nav-tabs li a.active").parent().addClass("active");

结果是这样的:

JS Fiddle 链接:http://jsfiddle.net/nLe1b30u/

Answer 1

你只需要添加 position:relative 到 .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
cursor: default;
position: relative;
}

这应该可以解决问题!