javascript - Bootstrap 的选项卡放置 - 如果选项卡元素之一具有下拉菜单，则它会在调整大小时中断

Question

当您使用nav-tabs时，如果一个元素(选项卡)有下拉菜单，并且您开始调整窗口大小，它一开始就可以正常工作，但是如果您拖动以使窗口再次变大，则项目下拉列表中的内容将与其他选项卡显示在同一行。从那一刻起，下拉菜单就变空了。无论您调整窗口大小，它都保持不变。从这里查看示例:jsfiddle

HTML

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Tab 1</a></li>
  <li role="presentation"><a href="#">Tab 2</a></li>
  <li role="presentation"><a href="#">Tab 3</a></li>
  <li role="presentation"><a href="#">Tab 4</a></li>
  <li role="presentation"><a href="#">Tab 5</a></li>
  <li role="presentation"><a href="#">Tab 6</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown Tab <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li role="presentation"><a href="#">item 1</a></li>
        <li role="presentation"><a href="#">item 2</a></li>
    <li role="presentation"><a href="#">item 3</a></li>
    </ul>
  </li>
</ul>

有什么想法可以解决这个问题吗？我希望当元素在选项卡下拉菜单下移动时，下拉列表仍保持为下拉列表。

更新 带选项卡和不带选项卡的打印屏幕。正确的方法是使用 tabdrop，但它的工作方式存在一些问题。

带有 tabdrop


没有 tabdrop

Answer 1

这个问题已经问了两年了，但我会回答。

您的问题是您正在 HTML 中手动添加下拉列表。 TabDrop.JS 创建下拉列表的方式不会产生此问题。 在 TabDrop.JS 中，下拉列表被创建为导航选项卡的第一个元素，并出于充分的原因向右推，它始终附加到下拉列表或导航选项卡。由于您手动将下拉列表创建为最后一个元素，因此您遇到了此问题。 从 html 中删除下拉列表并正常添加所有元素作为导航项。 您还需要包含 popper.js 才能查看下拉内容。

HTML 应该是:

$('.nav-tabs').tabdrop()

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Tab 1</a></li>
  <li role="presentation"><a href="#">Tab 2</a></li>
  <li role="presentation"><a href="#">Tab 3</a></li>
  <li role="presentation"><a href="#">Tab 4</a></li>
  <li role="presentation"><a href="#">Tab 5</a></li>
  <li role="presentation"><a href="#">Tab 6</a></li>
  <li role="presentation"><a href="#">item 1</a></li>
  <li role="presentation"><a href="#">item 2</a></li>
  <li role="presentation"><a href="#">item 3</a></li>
</ul>