我想要一个交互式导航,其中两个是左对齐的(“第一”和“第二”),另一个是右对齐的(“更多”)。目前,我可以在“第一”和“第二”之间切换,而不会出现问题。但是,如果我选择“更多”,则可以切换回“第一”或“第二”,但不能再切换回“更多”,因为无法将其停用。
是否可以将两个选项卡列表都视为一个选项卡,或者仅使用一个选项卡列表且左侧有两个选项卡,而右侧是一个选项卡?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqq1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Site</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav nav" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first"
role="tab" aria-controls="nav-first" aria-selected="true">First</a>
<a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab"
aria-controls="nav-second" aria-selected="false">Second</a>
</div>
<div class="navbar-nav nav ml-auto" id="nav-tab-right" role="tablist">
<a class="nav-item nav-link" id="nav-more-tab" data-toggle="tab" href="#nav-more" role="tab"
aria-controls="nav-more" aria-selected="false">More</a>
</div>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!--First tab-->
<div class="tab-pane show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
<p>First!</p>
</div>
<!--Second tab-->
<div class="tab-pane" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
<p>Second!</p>
</div>
<!--More tab-->
<div class="tab-pane" id="nav-more" role="tabpanel" aria-labelledby="nav-more-tab">
<p>More!</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
</body>
</html>