将水平制表符从 Bootstrap 3 转换为 Bootstrap 4
Convert horizontal tab from Bootstrap 3 to Bootstrap 4
我有一个来自 bootsnip 的代码，可以制作水平 Bootstrap 标签，其样式类似于 material。我在将它转换为 Bootstrap 时遇到问题 4. 我专注于将 li 的样式更改为 .nav-item 并将 a 更改为 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>
为了在 ::after 元素上进行定位，必须定位父元素。我修好了。
这是 Bootstrap 4 的完整有效代码片段（单击下面的 "run code snippet" 按钮并展开到整页进行测试）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li > a {
border: none;
color: #666;
}
.nav-tabs > li.nav-item > a,
.nav-tabs > li.nav-item > a:hover {
border: none;
color: #4285F4 !important;
background: transparent;
position: relative;
}
.nav-tabs > li.nav-item > a::after {
content: "";
background: #4285F4;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs > li.nav-item > a.active::after,
.nav-tabs > li.nav-item:hover > a::after {
transform: scale(1);
}
.card {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container-fluid p-5 bg-light">
<div class="row">
<div class="col-md-6">
<!-- Nav tabs -->
<div class="card p-4 mb-4">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active p-2" id="home" role="tabpanel" aria-labelledby="nav-home-tab">HOME TAB -- HOME TAB -- 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.
</div>
<div class="tab-pane fade show p-2" id="profile" role="tabpanel" aria-labelledby="nav-profile-tab">PROFILE TAB -- PROFILE TAB -- 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 class="tab-pane fade show p-2" id="messages" role="tabpanel" aria-labelledby="nav-messages-tab">MESSAGES TAB -- MESSAGES TAB -- 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 class="tab-pane fade show p-2" id="settings" role="tabpanel" aria-labelledby="nav-settings-tab">SETTINGS TAB -- SETTINGS TAB -- 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>
我有一个来自 bootsnip 的代码，可以制作水平 Bootstrap 标签，其样式类似于 material。我在将它转换为 Bootstrap 时遇到问题 4. 我专注于将 li 的样式更改为 .nav-item 并将 a 更改为 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>
为了在 ::after 元素上进行定位，必须定位父元素。我修好了。
这是 Bootstrap 4 的完整有效代码片段（单击下面的 "run code snippet" 按钮并展开到整页进行测试）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li > a {
border: none;
color: #666;
}
.nav-tabs > li.nav-item > a,
.nav-tabs > li.nav-item > a:hover {
border: none;
color: #4285F4 !important;
background: transparent;
position: relative;
}
.nav-tabs > li.nav-item > a::after {
content: "";
background: #4285F4;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs > li.nav-item > a.active::after,
.nav-tabs > li.nav-item:hover > a::after {
transform: scale(1);
}
.card {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container-fluid p-5 bg-light">
<div class="row">
<div class="col-md-6">
<!-- Nav tabs -->
<div class="card p-4 mb-4">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active p-2" id="home" role="tabpanel" aria-labelledby="nav-home-tab">HOME TAB -- HOME TAB -- 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.
</div>
<div class="tab-pane fade show p-2" id="profile" role="tabpanel" aria-labelledby="nav-profile-tab">PROFILE TAB -- PROFILE TAB -- 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 class="tab-pane fade show p-2" id="messages" role="tabpanel" aria-labelledby="nav-messages-tab">MESSAGES TAB -- MESSAGES TAB -- 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 class="tab-pane fade show p-2" id="settings" role="tabpanel" aria-labelledby="nav-settings-tab">SETTINGS TAB -- SETTINGS TAB -- 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>