引导下拉菜单在移动设备上消失答案

【问题标题】：Bootstrap dropdown menu disappears on mobile引导下拉菜单在移动设备上消失
【发布时间】：2016-11-19 19:30:35
【问题描述】：

我制作了一个只有下拉菜单的导航栏。当我在移动设备上查看该网站时，下拉菜单消失，折叠菜单也不显示。不知道怎么解决。

这就是菜单的样子，

关闭打开

在移动设备上

这是html

<div class="navbar navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a></li>
            <li><a ui-sref="cards">My Sets</a></li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>

如何让菜单显示在移动设备上？

【问题讨论】：

标签： html css twitter-bootstrap drop-down-menu navbar

【解决方案1】：

试试这个：

简化您的 HTML 代码 as Lucas Watson advised
使.navbar-header 和.navbar-right 浮动
为移动下拉菜单添加 CSS from this answer

请检查结果。是你想要达到的吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (max-width: 767px) {
  .navbar-header {
    float: left;
  }
  .navbar-right {
    float: right !important;
  }
  
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

<div class="navbar navbar-light" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="cards">NotePail</a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
        <ul class="dropdown-menu">
          <li><a ui-sref="account">My Account</a></li>
          <li><a ui-sref="cards">My Sets</a></li>
          <li class="divider"></li>
          <li><a href="server/logout">Logout</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

【解决方案2】：

将navbar-default 或navbar-inverse 添加到您的.navbar div 以显示切换样式，然后您将看到用于打开菜单的移动切换按钮。或者编写一些 CSS 来设置图标栏的样式。见Navbar

使用默认样式示例：

.navbar.navbar-light {
  background: #1086AD;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a>
            </li>
            <li><a ui-sref="cards">My Sets</a>
            </li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

使用您自己的 CSS 示例：

.navbar.navbar-light {
  background: red;
}
.navbar.navbar-light .icon-bar {
  background: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-static-top navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a>
            </li>
            <li><a ui-sref="cards">My Sets</a>
            </li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

【解决方案3】：

发生的情况是您将自定义下拉菜单放在“bs-slide-dropdown”div 中，Bootstrap 传统上会隐藏并在移动设备上创建下拉菜单。

你可以做的是 A）Bootstrap 3 - disable navbar collapse

或 B) 将您的代码简化为如下所示：

<div class="navbar navbar-light" role="navigation">
  <div class="container">

  <div class="navbar-header">
    <a class="navbar-brand" ui-sref="cards">NotePail</a>
  </div>

  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
      <ul class="dropdown-menu">
        <li><a ui-sref="account">My Account</a></li>
        <li><a ui-sref="cards">My Sets</a></li>
        <li class="divider"></li>
        <li><a href="server/logout">Logout</a></li>
      </ul>
    </li>
  </ul>

（你可能不得不弄乱这个来获得正确的定位）

【讨论】：