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

Nav-tabs在bootstrap版本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