导航栏中的 Bootstrap 4 导航药丸答案

【问题标题】：Bootstrap 4 nav pills in navbar导航栏中的 Bootstrap 4 导航药丸
【发布时间】：2019-02-28 13:09:40
【问题描述】：

我是 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”属性，它适用于按钮，但不适用于内容切换。

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

将nav 类添加到nav-pills 中，Tab 的内容切换将按预期工作...

<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>

演示：https://www.codeply.com/go/Xr6tLFbqKj

【讨论】：