我在Bootstrap中有以下导航栏:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="dropdow-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-file"></i><span class="header-text"> Download PDF </span><span class="caret"></span></a>
<ul class="dropdown-menu" id="pdf">
<li><a href="https://github.com/raphink/CV/blob/master/RaphaelPinson_en.pdf?raw=true">English</a></li>
<li><a href="https://github.com/raphink/CV/blob/master/RaphaelPinson_fr.pdf?raw=true">Français</a></li>
</ul>
</li>
</ul>
</div>
</div>
在移动设备上查看时,如果我点击下拉列表并且导航栏中有多个链接,则整个下拉菜单+菜单将换行。
在桌面上:
在手机上:
如何避免这种情况,并确保图标保持在顶行,但是下拉菜单是多大?
答案 0 :(得分:1)
您可以通过设置以下css来开始修复代码:
.navbar-nav .open .dropdown-menu {
position: absolute;
float: none;
width: auto;
margin-top: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
left: 0;
}
我从absolute
将位置更改为static
并将left: 0;
设置为下拉菜单,以对齐其左侧的父级,即您点击此处打开的位置下拉式菜单。同时删除了background-color: transparent;
,因为否则下拉列表不会有background-color
,并且无法在页面上的其他元素之上显示。
在未来的道路上,您可能希望将填充或其他样式属性设置为<li>
标记,以便它们扩展到导航栏的完整高度。这样您的下拉菜单就会从导航栏中正确启动。或者你可以玩边缘等。
希望这能帮助您找到正确的方向,然后您可以自己设定剩余的所需物品。
答案 1 :(得分:1)
为了记录,我最终调整了@ thepio的答案:
@media (max-width: 768px) {
.navbar-nav .open .dropdown-menu {
position: fixed;
top: 48px;
background: #f8f8f8;
border-top: 1px solid #e7e7e7;
margin: 0;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
width: 100vw;
}
}
我使用fixed
位置允许以全宽显示菜单,将top
设置为48px位于切换按钮下,并将border-top
和box-shadow
设置为匹配navbar-default
样式。最后,我将宽度设置为100vw
以使菜单具有全屏宽度: