css - Bootstrap 4.1 导航栏下拉对齐
问题描述
我正在使用 bootstrap 4.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>
</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>
CSS
@media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
实时预览片段
@media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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>
</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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
有谁知道如何解决这个问题?
提前致谢。
解决方案
用于position:absolute
此类
.navbar-nav .dropdown-menu {
position: absolute !important;
float: none;
}
@media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
.navbar-nav .dropdown-menu {
position: absolute !important;
float: none;
}
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>
</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>
推荐阅读
- python - 从 python 数据框创建嵌套 JSON
- c# - 在数据表中仅按列显示的正确方法是什么
- python-3.x - 即使在熊猫成功安装后,气流中也没有命名为熊猫的模块错误
- python - 如何在 Django 中为 css 和 js 文件创建公共文件夹?
- oracle - oracle如何查询一个月前执行的sql
- azure - 为什么我的 Azure 应用服务对两个计划收费?
- single-sign-on - 使用 Kerberos 的 SoapUI SSO
- .net - 是否可以从 .net 框架 4.6 Web 应用程序创建 Docker Linux 容器?
- ios - 停止呈现 PushNotification
- javascript - 将动作脚本重写为 javascript