如何将Bootstrap导航栏li元素的dropdown下拉菜单改为向上展开的dropup

Bootstrap 原生支持 dropup 向上展开效果，不需要额外嵌套按钮，直接修改下拉菜单父元素的类即可，提供两种实现方式：

方式1：手动修改类名（适配少量下拉项） #

直接把所有 <li class="nav-item dropdown"> 里的 dropdown 类替换为 dropup 即可，Bootstrap 会自动识别并渲染为向上展开的菜单，示例修改后的li结构如下：

<li class="nav-item dropup">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <p class="m-0 p-0"><i class="fa fa-home"></i></p>
     <p class="m-0 p-0">User Managemnt</p>
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

方式2：JS批量修改（适配大量下拉项） #

如果导航栏下拉项很多，不想逐个修改类名，直接在页面底部加入以下jQuery代码即可自动完成替换：

$(function(){
  // 把所有导航栏下的dropdown替换为dropup
  $('.navbar-nav .nav-item.dropdown').removeClass('dropdown').addClass('dropup');
  // 可选：如果向上展开后菜单贴近导航栏底部，可以加下边距调整位置
  // $('.dropdown-menu').css('margin-bottom', '8px');
})

可选样式调整 #

如果需要自定义展开后的间距、箭头样式，可以在原有CSS中追加以下代码：

/* 调整向上展开菜单的底部间距 */
.dropup .dropdown-menu {
  margin-bottom: 10px;
}
/* 可选：自定义下拉箭头样式 */
.dropup .dropdown-toggle::after {
  border-top: 0;
  border-bottom: .3em solid;
}

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