如何解决带有自定义三角形的 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 个选项卡的大小相同,即使在活动时也是如此,这样文本就不会再移动了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。