你好,非常感谢您的帮助。以下是有关该站点的链接:caulfield.co/test/originals.html
我正在尝试创建一个响应式 navbar
,其中当前的dropdown-items
在折叠后显示为标准的nav-items
。
请参见此图片:
在桌面上,dropdown-items
正如预期地显示。但在移动设备上,单独的下拉菜单是不必要的。以下是 Bootstrap 4 的默认显示方式:
是否有方便或自定义的解决方案,能够在移动设备上使用 navbar-collapse
时删除 dropdown
,从而使得 dropdown-items
就像navbar-items
一样?理想情况下,“更多”nav-link
将被隐藏,nav-items
将平滑地从“联系人”继续到“作品展示”。
HTML:
<nav id="navHome" class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container-fluid max-width-940">
<a class="navbar-brand" href="index.html">
<img src="images/mb.svg" alt="Margaret Biggs" width="220px"/>
</a>
<button class="navbar-toggler togglerNoBorder" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse backgroundWhite" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="bio.html">Bio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="originals.html">Originals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="exhibition.html">Exhibition</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prints.html">Prints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="professionals.html">For Professionals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown navDropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu navDropdown" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="works-on-display.html">Works on Display</a>
<a class="dropdown-item" href="poetry.html">Poetry</a>
<a class="dropdown-item" href="commissions.html">Commissions</a>
<a class="dropdown-item" href="blog.html">Blog</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-right {
float:right;
}
.togglerNoBorder{
border: 0px solid transparent;
}
.nav940{
max-width:940px;
margin:0 auto;
}
#navHome {
color:rgb(34, 34, 34);
font-size:13px;
font-weight:400;
line-height:16px;
text-transform:uppercase;
background-color:white;
height:60px;
box-shadow: 0 0 18px -4px #000;
}
#navHome a{
color:rgb(34, 34, 34);
}
#navHome a:hover{
color:#165fa5;
}
.navDropdown {
font-size:13px;
}
.navDropdown a:hover {
background-color:white;
}
.backgroundWhite{
background-color:white;
}
.nav-item{
padding-left:10px;
}
.dropdown-item {
padding-top:10px;
}
.navbar-brand {
margin-bottom:3px;
}
.dropdown-menu {
top:45px;
}