Question

在我的导航栏中，我放了两个下拉列表：一个用于菜单，另一个用于登录。当屏幕宽度大于768px时，它可以很好地工作。但是当它小于768px时，当屏幕尺寸变大时，下拉显示看起来并不像以前那样。

它只是一个Bootstrap navbar。

<!-- mobile menu dropdown -->
<ul class="nav navbar-nav pull-right mobile-menu col-xs-6">
   <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-align-justify glfcn" aria-hidden="true"></span>
        <!-- <b class="caret"></b> -->
     </a> 
     <ul class="dropdown-menu dropdown-menu-right">
       <li><a href="#">page 1</a></li>
       <li><a href="#">page 2</a></li>
       <li><a href="#">page 3</a></li>
     </ul>
  </li>
</ul><!-- mobile menu dropdown end-->

尝试使用不同的屏幕尺寸，您会看到外观会发生变化。为什么是这样？如何解决这个问题？

Answer 1

Bootstrap将以下代码应用于小屏幕上的navabars下拉列表：

@media (max-width: 767px) { 
    .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
}

这很有用，因为大多数移动用户都希望从导航栏下拉列表中获得全宽导航菜单。

如果你想阻止它，你可以覆盖这些样式。以下是通过添加类.box-navbar来应用原始样式的方法：

.navbar-nav .open  .dropdown-menu.box-navbar {
    position: absolute;
    float: left;
    margin-top:2px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

在不同的屏幕尺寸下，下拉菜单的外观会有所不同

1 个答案:

Demo in Fiddle