您好,提前感谢您的帮助。这是相关网站的链接:caulfield.co/test/originals.html
我正在尝试创建一个响应式 navbar
其中当前dropdown-items
显示为标准 nav-items
崩溃后。
看这张图片:
dropdown-items
在桌面上按预期显示。但是,在移动设备上,不需要单独的下拉菜单。以下是 Bootstrap 4 开箱即用的显示方式:
有谁知道删除 dropdown
的方便或自定义解决方案?曾经navbar-collapse
在移动设备等上使用,例如 dropdown-items
看起来就像 navbar-items
?理想情况下,“更多”nav-link
会display:none
和 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;
}
最佳答案
对移动设备 (<992px) 使用 @media 查询来显示 dropdown-menu
作为正常的导航链接...
@media (max-width: 992px) {
.dropdown-toggle {
display: none;
}
.dropdown-menu {
display: block;
position: relative;
border-width: 0;
padding: 0;
margin: 0;
}
.dropdown-item {
padding: .5rem 0rem;
color: rgba(0,0,0,.5);
}
}
https://www.codeply.com/go/lAAQOwhAx0
关于drop-down-menu - 响应式 Bootstrap 4 导航栏下拉项目显示为导航项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53454056/