Bootstrap 选项卡式导航/拆分下拉按钮问题

Question

我尝试向页面添加选项卡式导航，如下所示：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

但显示不正确：

所以我从 Bootstrap 4.0.0 切换到 3.3.7，它显示正确，但我的拆分下拉菜单按钮坏了。

    <li class="nav-item">
      <div class="btn-group">
        <button type="button" class="btn btn-primary">{{ session.username }}</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="/get_messages">Messages</a>
          <a class="dropdown-item" href="/get_friend_requests">Friend Requests</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout">Log Out</a>
        </div>
      </div>
    </li>

如何让两个组件都正确显示？在 4.0.0 和 3.3.7 之间切换会破坏其中一个。

Answer 1

导航选项卡在引导版本 4 中的工作方式不同，您需要：

<ul class="nav nav-tabs">
  <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

请注意这一点，但 bootstrap 4 文档将 show 类用于活动的 tab-content（您可能需要将 in 替换为 show）：

<div id="home" class="tab-pane fade show active">

请看这里：W3Schools Bootstrap 4 nav-tabs

请看这里：Bootstrap 4 documentation