Css 引导4.1导航栏下拉对齐

我使用的是Bootstrap4.1，在为导航栏添加媒体查询之前，一切正常。我假设我没有在媒体查询中添加下拉列表，但我不确定这是否是原因

HTML

<nav class="navbar navbar-expand-custom bg-dark navbar-dark">
    <a class="navbar-brand" href="landingPage(Stu).aspx">
        Trip Management System
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
                    <a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
                    <a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
                    <a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
                </div>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
            </li>

            <li class="nav-item dropdown" style="position: absolute; right: 80px;">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <asp:Label ID="Labelusername" runat="server"></asp:Label>
                &nbsp;</a><div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
                    <a class="dropdown-item" href="profilePage.aspx">View Profile</a>
                    <a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
                    <a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="signout.aspx">Sign out</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

片段用于实时预览

@介质（最小宽度：1380px）{
.navbar扩展自定义{
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
}
.navbar展开自定义.navbar导航{
弯曲方向：行；
}
.navbar展开自定义.navbar导航.nav链接{
填充权：.5rem；
左侧填充：.5rem；
}
.导航栏展开自定义.导航栏折叠{
显示：flex！重要；
}
.navbar展开自定义.navbar切换程序{
显示：无；
}
}

对此类使用

位置：绝对

  .navbar-nav .dropdown-menu {
              position: absolute !important;
            float: none;
      }


@介质（最小宽度：1380px）{
.navbar扩展自定义{
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
}
.navbar展开自定义.navbar导航{
弯曲方向：行；
}
.navbar展开自定义.navbar导航.nav链接{
填充权：.5rem；
左侧填充：.5rem；
}
.导航栏展开自定义.导航栏折叠{
显示：flex！重要；
}
.navbar展开自定义.navbar切换程序{
显示：无；
}
.navbar导航下拉菜单{
位置：绝对！重要；
浮动：无；
}
}













之所以发生这种情况，是因为您编写了错误的扩展类
导航栏扩展自定义类在引导程序4中不存在，所以会产生问题

因此，我将
navbar expand custom
更改为
navbar expand lg
，这样每当屏幕小于
992px
burger菜单时就会显示


@介质（最小宽度：1380px）{
.navbar扩展自定义{
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
}
.navbar展开自定义.navbar导航{
弯曲方向：行；
}
.navbar展开自定义.navbar导航.nav链接{
填充权：.5rem；
左侧填充：.5rem；
}
.导航栏展开自定义.导航栏折叠{
显示：flex！重要；
}
.navbar展开自定义.navbar切换程序{
显示：无；
}
}













你能解释一下你想从我们这里得到什么吗？@NishargShah我添加了一张图片，说明我希望下拉列表显示的内容。想要和问题的区别是什么？&什么是ddl？@NishargShah问题是当我点击下拉列表时，它显示在导航栏中。然而，我希望它能在外面展示。也许你可以看看照片，因为很难用语言来解释。ddl是下拉列表的缩写形式。请为下拉列表指定z索引。这将使它在顶部
  .navbar-nav .dropdown-menu {
              position: absolute !important;
            float: none;
      }