我是 Bootstrap 新手,希望在导航栏中添加导航丸来切换页面内容(如选项卡)。没有导航栏它可以工作,但我想将它放在我的导航栏中。
这是我到目前为止的代码:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<span class="navbar-brand mb-0 h1">ioBroker</span>
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
</nav>
<main role="main" class="container-full">
<div class="container-full">
<div class="tab-content">
<div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel">Content 1</div>
<div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel">Content 2</div>
</div>
</div>
</main>
我遇到的问题是我无法切换回已打开的“选项卡”。我删除了“data-toggle”属性,它适用于按钮,但不适用于内容切换。
最佳答案
将 nav
类添加到 nav-pills
中,内容切换将按 Tabs 的预期工作...
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
关于html - 导航栏中的 Bootstrap 4 导航丸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54926522/