带有自定义三角形的 Bootstrap 4 选项卡，激活时文本向左移动几个像素，为什么？

问题描述

我有一些 Boostrap 选项卡，并用 CSS 在底部制作了一个三角形。

Everything looks perfect but when the tab is active the link text moves a bit to the left and I can't understand why.

问题似乎出在右边框和左边框线上，就好像我将它们注释掉一样，文本不会移动。

我添加了一个片段，以便您可以自己查看。

有什么想法吗？谢谢。

    a.nav-link.active:after {
        content: "";
        width: 0;
        height: 0;
        position: relative;
        bottom: -50px;
        left: -10%;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-top: 15px solid #343a40;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
  <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

解决方法

使用透明边框毫无意义。如果你想从左边和右边留出一些空间，只需使用填充或边距：以下是 padding 如何使用它： https://www.w3schools.com/cssref/pr_padding.asp 这是边距的含义以及如何使用它： https://www.w3schools.com/cssref/pr_margin.asp

文本不会向左移动，它以标签本身的宽度为中心，因此当一个标签变小时，文本将找到标签的中心。当标签变大时，同样的事情就会出现。也许您可以使所有 3 个选项卡的大小相同，即使在活动时也是如此，这样文本就不会再移动了。

nav nav tabs tabs twitter-bootstrap