Bootstrap 4按钮下拉子菜单dropup不生效问题求助

我帮你分析下，你给最外层容器加了dropup类，但嵌套的Days、Hours子菜单还是没法向上展开，这是因为Bootstrap 4的dropup样式默认只作用于直接子层级的下拉菜单，嵌套的子菜单不会自动继承这个向上展开的行为，得单独处理才行。下面给你两种可行的解决方法：

方法一：给子菜单添加自定义CSS调整定位 #

如果你的子菜单是用dropdown-submenu这种自定义嵌套结构实现的（Bootstrap 4官方其实不支持嵌套下拉，这类结构一般是开发者自己扩展的），可以给子菜单的列表加个自定义类，再写CSS调整它的定位：

第一步：修改HTML结构 #

补全并调整你的代码，给每个子菜单的ul.dropdown-menu加上dropdown-menu-up类：

<div class="dropup">
  <button style="width:220px" class="btn btn-secondary dropdown-toggle ml-auto" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Period</button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Days</a>
      <ul class="dropdown-menu dropdown-menu-up">
        <li><a class="dropdown-item" href="#">1 Day</a></li>
        <li><a class="dropdown-item" href="#">3 Days</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Hours</a>
      <ul class="dropdown-menu dropdown-menu-up">
        <li><a class="dropdown-item" href="#">6 Hours</a></li>
        <li><a class="dropdown-item" href="#">12 Hours</a></li>
      </ul>
    </li>
  </ul>
</div>

第二步：添加自定义CSS #

在你的样式文件里加上这段代码，把子菜单的定位改成向上展开：

.dropdown-submenu .dropdown-menu-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
  /* 如果子菜单原本是向右展开的，还可以调整left/right让它对齐父元素 */
  left: 0;
  right: auto;
}

方法二：给子菜单单独套Dropup容器 #

如果想完全利用Bootstrap原生的dropup类，你可以把每个子菜单的触发元素和菜单列表单独放在一个dropup容器里，这样就能继承原生的向上展开样式：

<div class="dropup">
  <button style="width:220px" class="btn btn-secondary dropdown-toggle ml-auto" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Period</button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
    <li>
      <div class="dropup">
        <a class="dropdown-item dropdown-toggle" href="#" id="daysDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Days</a>
        <ul class="dropdown-menu" aria-labelledby="daysDropdown">
          <li><a class="dropdown-item" href="#">1 Day</a></li>
          <li><a class="dropdown-item" href="#">3 Days</a></li>
        </ul>
      </div>
    </li>
    <li>
      <div class="dropup">
        <a class="dropdown-item dropdown-toggle" href="#" id="hoursDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hours</a>
        <ul class="dropdown-menu" aria-labelledby="hoursDropdown">
          <li><a class="dropdown-item" href="#">6 Hours</a></li>
          <li><a class="dropdown-item" href="#">12 Hours</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

最后提醒下，要确保你已经正确引入了Bootstrap 4的CSS、JS文件，以及它依赖的jQuery，不然下拉功能可能根本没法正常触发哦。

内容的提问来源于stack exchange，提问作者anj28