避免在换行符上显示下拉图标

时间:2016-05-16 22:29:18

标签: css twitter-bootstrap

我在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>

在移动设备上查看时,如果我点击下拉列表并且导航栏中有多个链接,则整个下拉菜单+菜单将换行。

在桌面上:

Desktop screenshot

在手机上:

Mobile screenshot

如何避免这种情况,并确保图标保持在顶行,但是下拉菜单是多大?

2 个答案:

答案 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-topbox-shadow设置为匹配navbar-default样式。最后,我将宽度设置为100vw以使菜单具有全屏宽度:

Full width