【发布时间】：2018-07-13 13:57:54
【问题描述】：
我有一个来自 bootsnip 的代码，用于制作具有类似材料风格的水平 Bootstrap 选项卡。我无法将其转换为 Bootstrap 4。我专注于将 li 的样式更改为 .nav-item 和 css 中的 .nav-link 。但结果不一样。
这是使用 Bootstrap 3 的代码： horizontal tab
这是我使用 Bootstrap 4 的代码：
.no-style{
text-decoration:none!important;
}
.nav-tabs {
background-color:#333;
border-bottom: 2px solid #DDD;
}
.nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link.active:focus, .nav-tabs > .nav-item > .nav-link.active:hover {
border-width: 0;
}
.nav-tabs > .nav-item > .nav-link {
border: none;
color: rgba(255,255,255,.6);
}
.nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link:hover {
border: none;
color: rgba(255,255,255,1);
background: transparent;
}
.nav-tabs > .nav-item > .nav-link::after {
content: "";
background: #4285F4;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs > .nav-item > .nav-link.active::after, .nav-tabs > .nav-item:hover > .nav-link::after {
transform: scale(1);
}<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Nav tabs -->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item"><a href="#home" class="nav-link no-style active" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" class="nav-item"><a href="#profile" class="nav-link no-style" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation" class="nav-item"><a href="#messages" class="nav-link no-style" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation" class="nav-item"><a href="#settings" class="nav-link no-style" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
我认为问题出在 .nav-tabs > .nav-item > .nav-link::after 中的绝对位置。但我不知道修复它。尝试将底部 -1 更改为顶部 0/顶部 38。结果是边框移动到选项卡的顶部。但是宽度是满的，因为 100%
标签： html css twitter-bootstrap-3 bootstrap-4 twitter-bootstrap-4